React life cycle methods to useEffect

How to map a React class life cycle methods/hooks to useEffect

Tuesday, November 9, 2021

old map

Common class lifecycle methods

123456789101112// happens as soon as your component is mountedcomponentDidMount() {} // happens as soon as the updating begincomponentDidUpdate(prevProps, prevState, snapshot) {} // for certain performance optimizationsshouldComponentUpdate(nextProps, nextState) {} // happens just before the component unmountscomponentWillUnmount() {}}

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 useEffect hook.

12345useEffect(() => { // code to run when the component is mounted // Make sure this is empty to ensure the hook will only run once}, [])
Link to Codepen


Add the dependency array and pass it to the useEffect hook.

12345678910// props: {name}// state: {visible} useEffect(() => { // ... code to run // the dependency array below is "equivalent" to: // the effect will trigger if // !== || state.enabled !== nextState.enabled}, [name, visible])
Link to Codepen


A useEffect can return a function whose body will be executed when the component is unmounted.

12345useEffect(() => { return () => { // code to run when the component is unmounted }}, /* with or without dependency array */)
Link to Codepen


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:

123456789const hasMount = useRef(false) useEffect(() => { if (hasMount.current) { // code to run when the component is updated } else { hasMount.current = true }}, /* dependencies */)`
Link to Codepen

Additional Note


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.