DEV Community

Cover image for React class life cycle methods to useEffect
Carlo Gino Catapang
Carlo Gino Catapang

Posted on • Updated on • Originally published at l.carlogino.com

React class life cycle methods to useEffect

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() {}
}
Enter fullscreen mode Exit fullscreen mode

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
}, [])
Enter fullscreen mode Exit fullscreen mode

Link to Codepen

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]) 
Enter fullscreen mode Exit fullscreen mode

Link to Codepen

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 */)
Enter fullscreen mode Exit fullscreen mode

Link to Codepen

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 */)`
Enter fullscreen mode Exit fullscreen mode

Link to Codepen

Additional Note

  • You can only define one of each lifecycle method in a class component. When using hooks, you can define as many useEffect as you want.
  • You can only use useEffect in a function 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.

If you find this useful and you want to support me

Buy Me A Coffee

Top comments (3)

Collapse
 
leodarpan profile image
DARPAN ANEJA

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)

Collapse
 
codegino profile image
Carlo Gino Catapang

Thanks, I really appreciate the feedback. Will try to update soon.

Collapse
 
leodarpan profile image
DARPAN ANEJA

Thanks for taking it positively!