43

What are the equivalents of the componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle hooks using React hooks like useEffect?

1

4 Answers 4

64

componentDidMount

Pass an empty array as the second argument to useEffect() to run only the callback on mount only.

function ComponentDidMount() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('componentDidMount');
  }, []);

  return (
    <div>
      <p>componentDidMount: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <ComponentDidMount />
  </div>,
  document.querySelector("#app")
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

componentDidUpdate

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render. useEffect runs on every render including the first. So if you want to have a strict equivalent as componentDidUpdate, you have to use useRef to determine if the component has been mounted once. If you want to be even stricter, use useLayoutEffect(), but it fires synchronously. In most cases, useEffect() should be sufficient.

This answer is inspired by Tholle, all credit goes to him.

function ComponentDidUpdate() {
  const [count, setCount] = React.useState(0);

  const isFirstUpdate = React.useRef(true);
  React.useEffect(() => {
    if (isFirstUpdate.current) {
      isFirstUpdate.current = false;
      return;
    }

    console.log('componentDidUpdate');
  });

  return (
    <div>
      <p>componentDidUpdate: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <ComponentDidUpdate />,
  document.getElementById("app")
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

componentWillUnmount

Return a callback in useEffect's callback argument and it will be called before unmounting.

function ComponentWillUnmount() {
  function ComponentWillUnmountInner(props) {
    React.useEffect(() => {
      return () => {
        console.log('componentWillUnmount');
      };
    }, []);

    return (
      <div>
        <p>componentWillUnmount</p>
      </div>
    );
  }
  
  const [count, setCount] = React.useState(0);

  return (
    <div>
      {count % 2 === 0 ? (
        <ComponentWillUnmountInner count={count} />
      ) : (
        <p>No component</p>
      )}
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <ComponentWillUnmount />
  </div>,
  document.querySelector("#app")
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

1
  • 3
    Great answer, for anyone that may not understand why the [] works for componentDidMount, this tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. stackoverflow.com/a/53253411/611628 Commented Jun 3, 2019 at 20:01
17

From React docs:

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

By that saying they mean:

componentDidMount is sort of useEffect(callback, [])

componentDidUpdate is sort of useEffect(callback, [dep1, dep2, ...]) - the array of deps tell React: "if one of the deps is change, run the callback after rendering".

componentDidMount + componentDidUpdate is sort of useEffect(callback)

componentWillUnmount is sort of the returned function from the callback:

useEffect(() => { 
    /* some code */
    return () => { 
      /* some code to run when rerender or unmount */
    }
)

With the help of Dan Abramov's phrasing from his blog, and some additions of my own:

While you can use those hooks, it’s not an exact equivalent. Unlike componentDidMount and componentDidUpdate, it will capture props and state. So even inside the callbacks, you’ll see the props and state of the specific render (which means in componentDidMount the initial props and state). If you want to see “latest” something, you can write it to a ref. But there’s usually a simpler way to structure the code so that you don’t have to. The returned function which supposes to be alternative to componentWillUnmount also is not an exact equivalent, since the function will run every time the component will re-render and when the component will unmount. Keep in mind that the mental model for effects is different from component lifecycles, and trying to find their exact equivalents may confuse you more than help. To get productive, you need to “think in effects”, and their mental model is closer to implementing synchronization than to responding to lifecycle events.

Example from Dan's blog:

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      console.log(`You clicked ${count} times`);
    }, 3000);
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

enter image description here

If we use the class implementation:

componentDidUpdate() {
  setTimeout(() => {
    console.log(`You clicked ${this.state.count} times`);
  }, 3000);
}

enter image description here

this.state.count always points at the latest count rather than the one belonging to a particular render.

2
  • Thanks for sharing that information about it capturing the state/props of that render. That is interesting. So far I only see this as a good thing and struggling to think of any gotchas with the way useEffect handles this case. Commented Jun 3, 2019 at 19:55
  • +1 for the example showing captured state/props. I'll certainly file that for when I come across a situation where eventual consistency between data is expected asynchronously
    – jymbob
    Commented Jul 24, 2019 at 14:21
14

For Simple Explanation, I would like to show a visual reference

enter image description here

As we can see simply in the above picture that for -

componentDidMount :

useEffect(() => {        
   console.log('componentWillMount');
}, []);

componentDidUpdate :

useEffect(() => {        
   console.log('componentWillUpdate- runs on every update');
});

useEffect(() => {        
   console.log('componentWillUpdate - runs if dependency value changes ');
},[Dependencies]);

componentwillUnmount :

  useEffect(() => {
    return () => {
        console.log('componentWillUnmount');
    };
   }, []);
4

Here is a good summary from the React Hooks FAQ listing Hooks equivalents for class lifecycle methods:

constructor: Function components don’t need a constructor. You can initialize the state in the useState call. If computing the initial state is expensive, you can pass a function to useState.

getDerivedStateFromProps: Schedule an update while rendering instead.

shouldComponentUpdate: See React.memo below.

render: This is the function component body itself.

componentDidMount, componentDidUpdate, componentWillUnmount: The useEffect Hook can express all combinations of these (including less common cases).

componentDidCatch and getDerivedStateFromError: There are no Hook equivalents for these methods yet, but they will be added soon.


componentDidMount

useEffect(() => { /*effect code*/ }, []);

[] will make the effect only run once at mount time. Usually you better specify your dependencies. To have the same layout timings as componentDidMount, have a look at useLayoutEffect (not needed in most cases).

componentWillUnmount

useEffect(() => { /*effect code*/ ; return ()=> { /*cleanup code*/ } }, [deps]); 

componentWillUnmount corresponds to an effect with cleanup.

componentDidUpdate

const mounted = useRef();
useEffect(() => {
  if (!mounted.current) mounted.current = true;
  else {
    // ... on componentDidUpdate 
  }
});

To have the same layout timings as componentDidUpdate, have a look at useLayoutEffect (not needed in most cases). See also this post for a more detailed look at componentDidUpdate hook equivalents.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.