Mastering useEffect for React Lifecycle Events
React's useEffect hook allows you to handle lifecycle events in your functional components. It's like combining componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
Here's a basic usage of useEffect:
import React, { useEffect } from 'react';
function App() {
useEffect(() => {
// Your code here
}, []);
return <div>My App</div>;
}
In the example above, the function passed to useEffect will run after the render is committed to the screen. Think of it as componentDidMount and componentDidUpdate combined.
To mimic componentDidMount, pass an empty array [] as the second argument to useEffect:
useEffect(() => {
// This will run ONCE after initial render, similar to componentDidMount
}, []);
To mimic componentDidUpdate, you can pass specific values in the array:
useEffect(() => {
// This runs AFTER every render, ONLY IF `prop` has changed since last render
}, [prop]);
To mimic componentWillUnmount, return a function from within the function passed to useEffect:
useEffect(() => {
// component cleanup
return () => {
// This will run when the component unmounts, similar to componentWillUnmount
};
}, []);
Master useEffect to write clean, robust, and efficient React code!
Explore more articles
Keep experimenting and happy coding! You can find me at @samuellawrentz on X.