Effects with React useEffect
Some practical examples of how to use the React useEffect() -
export default function App() { const [name, setName] = React.useState(""); const [age, setAge] = React.useState(0); React.useEffect(() => { console.log("component mounted"); return () => { console.log("component unmounted"); }; }, []); // empty array means it will only run on mounting // Separation of concerns // This is a good example of how to separate concerns splitting into two useEffects to handle each value React.useEffect(() => { console.log("name changed", name); }, [name]); // only triggers when name changes React.useEffect(() => { console.log("age changed", age); }, [age]); // only triggers when age changes return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <input type="number" value={age} onChange={(e) => setAge(e.target.value)} /> </div> ); }
On Mounting
Similar to the legacy componentDidMount
it will trigger on mounting the component:
React.useEffect(() => { console.log("component mounted"); return () => { console.log("component unmounted"); }; }, []); // empty array means it will only run on mounting
On Changing Values
React.useEffect(() => { console.log("name changed", name); }, [name]); // only triggers when name changes
Separation of Concerns
Instead of watching two values at the same useEffect, like the following:
React.useEffect(() => { console.log({ name, age }); }, [name, age]);
Think in separation of concerns, and split each it will be cleaner and easier for the next person who need to read your code, eg:
// Separation of concerns // This is a good example of how to separate concerns splitting into two useEffects to handle each value React.useEffect(() => { console.log("name changed", name); }, [name]); // only triggers when name changes React.useEffect(() => { console.log("age changed", age); }, [age]); // only triggers when age changes