Some practical examples of how to use the React useEffect() -
import React from "react";
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
Top comments (2)
I think there is a mistake in the last code block. I think the second useEffect should have had
age
in its dependency arrayThanks! Fixed.