useEffect cheat sheet

Always executing the callback

When the component mounts or updates

useEffect(() => {
console.log("component mounted or updated");
});

Executing the callback only when the component mounts

not when the component updates

useEffect(() => {
console.log("component mounted");
}, []);

Executing the callback when the component mounts and when the component updates

because a specific variable has changed

useEffect(() => {
console.log("component mounted or updated, counter:", counter);
}, [counter]);

Subscribe?

Be the first to receive insightful articles and actionable resources that help you to elevate your skills.