React life cycle methods to useEffect
How to map a React class life cycle methods/hooks to useEffect
Tuesday, November 9, 2021
Common class lifecycle methods
How can we map those lifecycle hooks to useEffect?
Here are basic templates to convert a class lifecycle method to a useEffect hook:
Create an empty dependency array and pass it to the
Add the dependency array and pass it to the
useEffect can return a function whose body will be executed when the component is unmounted.
This is a bit subjective because it's up to the developer to decide how
componentDidUpdate should behave (the simplest is the same as
It could also be a combination of
shouldComponentUpdate mapping with the addition of a reference variable to check if the component has been mounted as shown below:
- You can only define one of each lifecycle method in a
classcomponent. When using hooks, you can define as many
useEffectas you want.
- You can only use
The examples above are simple ways to map a
class lifecycle hooks component to a
React hooks, and there are many other ways to do it. The good news is that you don't need to think of mapping lifecycle hooks to useEffect since React hooks introduced a different paradigm on how we can create a React component and how we can manage side-effects. This mapping is only useful when I'm refactoring a
class component to be a
function component. For newer projects, I ought to think that the class component does not exist.