DEV Community

Ibrahima Ndaw
Ibrahima Ndaw

Posted on • Updated on • Originally published at ibrahima-ndaw.com

How to replace component lifecycle with useEffect hook in React?

Originally posted on my blog


Before React 16.8, we were forced to use the class-based component to have access in component lifecycle. And now with Hooks, we are now able to use functional component for state management, data fetching etc. We can now replace component lifecycle like componentDidMount, componentDidUpdate and componentWillUnmount with useEffect in our React component.

1. componentDidMount

The componentDidMount() method runs after the component output has been rendered to the DOM. This is a good place to cause side-effects.

// With ccomponentDidMount()
componentDidMount() {
    console.log('Hello World');
}

// with useEffect()
useEffect(() => {
    console.log('Hello World');
}, [])
Enter fullscreen mode Exit fullscreen mode

If we don't pass an empty array to useEffect, it will run on every change. Therefore, we must give as second argument an empty array to mimic the componentDidMount behavior. It tells to React that your effect doesn’t depend on any values from props or state, so it never needs to re-run, useEffect will run only once after the component is created.

2. componentDidUpdate

The componentDidUpdate() method is invoked immediately after updating occurs.

// With ccomponentDidUpdate()
componentDidUpdate(prevProps) {
    console.log(`Hello World ${prevProps}`);
}

// with useEffect()
useEffect(() => {
    console.log('Hello World');
}, [prevProps])
Enter fullscreen mode Exit fullscreen mode

When we pass a value(prevProps) to the array, it tells to useEffect to run only if the value change.

3. componentWillUnmount

The componentWillUnmount() method is called immediately before a component is unmounted and destroyed. It is a good place to do some cleanup works.

// With ccomponentDidUnmount()
componentWillUnmount() {
    console.log('Hello World');
}

// with useEffect()
useEffect(() => {
    console.log('Hello World');
    return () => {
        console.log('Do some cleanup');
    }
}, [])
Enter fullscreen mode Exit fullscreen mode

By returning an anonymous function with useEffect, it will run before the component unmounting. And the empty array passed as second argument tells to useEffect to run when the component will be mounted or unmounted.

Top comments (4)

Collapse
 
yvonnickfrin profile image
🦁 Yvonnick FRIN • Edited

Nice article! The effect you wrote for the componentDidUpdate example will be also called at mount. You need to use a ref to ensure it isn't called at mount 😄 (This is a detail)

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

That detail matters a lot. Thanks for your comment

Collapse
 
sadikhoc profile image
Sadikh-OC

Merci beaucoup pour l'article.je viens de mieux comprendre useEffect

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Au plaisir et merci beaucoup de l'avoir lu.