What are the equivalents of the componentDidMount
, componentDidUpdate
, and componentWillUnmount
lifecycle hooks using React hooks like useEffect
?
-
React documentation on skipping elements reactjs.org/docs/…. Touches on the solutions given below about componentDidMount with []– Thulani ChivandikwaCommented Jun 3, 2019 at 20:00
4 Answers
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>
-
3Great 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
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>
);
}
If we use the class implementation:
componentDidUpdate() {
setTimeout(() => {
console.log(`You clicked ${this.state.count} times`);
}, 3000);
}
this.state.count
always points at the latest count rather than the one belonging to a particular render.
-
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– jymbobCommented Jul 24, 2019 at 14:21
For Simple Explanation, I would like to show a visual reference
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');
};
}, []);
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 theuseState
call. If computing the initial state is expensive, you can pass a function touseState
.
getDerivedStateFromProps
: Schedule an update while rendering instead.
shouldComponentUpdate
: See React.memo below.
render
: This is the function component body itself.
componentDidMount
,componentDidUpdate
,componentWillUnmount
: TheuseEffect
Hook can express all combinations of these (including less common cases).
componentDidCatch
andgetDerivedStateFromError
: 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.