How to map a React class life cycle methods/hooks to useEffect
Common class lifecycle methods
// happens as soon as your component is mounted
componentDidMount() {}
// happens as soon as the updating begin
componentDidUpdate(prevProps, prevState, snapshot) {}
// for certain performance optimizations
shouldComponentUpdate(nextProps, nextState) {}
// happens just before the component unmounts
componentWillUnmount() {}
}
How can we map those lifecycle hooks to useEffect?
Here are basic templates to convert a class lifecycle method to a useEffect hook:
componentDidMount
Create an empty dependency array and pass it to the useEffect
hook.
useEffect(() => {
// code to run when the component is mounted
// Make sure this is empty to ensure the hook will only run once
}, [])
shouldComponentUpdate
Add the dependency array and pass it to the useEffect
hook.
// props: {name}
// state: {visible}
useEffect(() => {
// ... code to run
// the dependency array below is "equivalent" to:
// the effect will trigger if
// props.name !== nextProps.name || state.enabled !== nextState.enabled
}, [name, visible])
componentWillUnmount
A useEffect
can return a function whose body will be executed when the component is unmounted.
useEffect(() => {
return () => {
// code to run when the component is unmounted
}
}, /* with or without dependency array */)
componentDidUpdate
This is a bit subjective because it's up to the developer to decide how componentDidUpdate
should behave (the simplest is the same as componentDidMount
mapping).
It could also be a combination of componentDidMount
and shouldComponentUpdate
mapping with the addition of a reference variable to check if the component has been mounted as shown below:
const hasMount = useRef(false)
useEffect(() => {
if (hasMount.current) {
// code to run when the component is updated
} else {
hasMount.current = true
}
}, /* dependencies */)`
Additional Note
- You can only define one of each lifecycle method in a
class
component. When using hooks, you can define as manyuseEffect
as you want. - You can only use
useEffect
in afunction
component
Conclusion
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.
Top comments (3)
Its a very very helpful post!!! However, there are some typos in the post.
Grammar error:
A useEffect can return a function which its body will be executed when the component is unmounted.
Typo:
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 mange side-effects.
P.S.: The text in the conclusion is not justified(in terms of arrangement)
Thanks, I really appreciate the feedback. Will try to update soon.
Thanks for taking it positively!