How to call useEffect React Hook on a component mount and unmount
With pure function React Components you're not allowed to use lifecycle methods like componentDidMount
or componentWillUnmount
.
These can be replaced with proper use of useEffect
hook introduced in React version 16.8.
Here is the code that will run exactly once when a component is mounted and exactly once when it's supposed to be unmounted:
import { useEffect } from "React";
const ExampleComponent = () => {
useEffect(() => {
// Here goes the code you wish to run on mount
return () => {
// Here goes the code you wish to run on unmount
}
}, []);
...
}
It's crucial to pass an empty array as the second argument of useEffect
function call. If you omit it or pass dependencies inside of array it won't work as intended.