React's useEffect hook is used quite often in applications. It is used to perform side effects in your components like subscribing/unsubscribing to events, making API requests etc.
In this article we're going to discuss the flow in which things happen when working with this hook.
Order in which "Setup" and "Cleanup" functions are called
The useEffect hook accepts a function as the only argument which is often referred as the "Setup" function and you can optionally return a function from this "Setup" which is often referred as the "Cleanup" function.
In this example we'll see the flow in which these Setup and Cleanup functions are called.
const { useState, useEffect } = React;
const Counter = () => {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
useEffect(() => {
console.log("useEffect no dependency ran");
return () => console.log("useEffect no dependency cleanup ran");
});
useEffect(() => {
console.log("useEffect empty dependency ran");
return () => console.log("useEffect empty dependency cleanup ran");
}, []);
useEffect(() => {
console.log("useEffect count1 as dependency ran");
return () => console.log("useEffect count1 as dependency cleanup ran");
}, [count1]);
useEffect(() => {
console.log("useEffect count2 as dependency ran");
return () => console.log("useEffect count2 as dependency cleanup ran");
}, [count2]);
return (
<>
<button onClick={() => setCount1((c) => c + 1)}>{count1}</button>
<button onClick={() => setCount2((c) => c + 1)}>{count2}</button>
</>
);
};
const App = () => {
const [showCounter, setShowCounter] = useState(false);
return (
<main className="App">
<label htmlFor="toggleCounter">Toggle Counter: </label>
<input
id="toggleCounter"
type="checkbox"
checked={showCounter}
onChange={({ target }) => setShowCounter(target.checked)}
/>
<div>{showCounter && <Counter />}</div>
</main>
);
};
const rootEl = document.getElementById("root");
ReactDOM.render(<App />, rootEl);
Take a moment to understand the example above, it looks lengthy because it has a bunch of useEffect calls but its fairly simple otherwise.
Our focus is on the Counter component and all our logs are from this component.
So, initially there are no logs because the Counter component is not yet mounted (as showCounter state is set to false).
Let's click on the "Toggle Counter" checkbox
This updates the showCounter state and a re-render happens and we have our Counter mounted for the first time.
Logs
useEffect no dependency ran
useEffect empty dependency ran
useEffect count1 as dependency ran
useEffect count2 as dependency ran
💡 Observation: Notice all setups ran and they ran in the order they were called.
🚀 This is because all Setups run on mount irrespective of the dependency array and they run in the exact same order in which we called them. Also, no Cleanups run on mount.
(Clear the logs before moving to the next section)
Let's click on the first counter button
Logs
useEffect no dependency cleanup ran
useEffect count1 as dependency cleanup ran
useEffect no dependency ran
useEffect count1 as dependency ran
💡 Observation: Notice only two effects ran this time and both cleanup and setup ran for these two (and they still run in order they were called).
🚀 Its because on re-renders the Effect hook (both Cleanup and Setup) runs only if the dependencies change (count1 changed) or if the second argument is skipped completely.
💡 Observation: Notice Cleanups run before Setups for both "no dependency" Effect hook and "count1" Effect hook.
🚀 So, when both Cleanup and Setup has to run for a particular effect hook, the Cleanup will run before the Setup.
If you want to explore why useEffect runs after every render and not just on unmount, React docs does a really great job of explaining this.
(Clear the console before moving to the next section)
Let's now click on the "Toggle Counter" checkbox again
This updates the showCounter state and unmounts the Counter component.
Logs
useEffect no dependency cleanup ran
useEffect empty dependency cleanup ran
useEffect count1 as dependency cleanup ran
useEffect count2 as dependency cleanup ran
💡 Observation: Notice all cleanups ran and they ran in the order they were called.
🚀 This is because all Cleanups run on unmount irrespective of the dependency array and they run in order. Also, no Setups run on unmount.
🔥 CheatSheet
| Phase | Setups | Cleaups | Condition |
|---|---|---|---|
| Mount | All | None | None |
| Re-render | Some | Some | Dependency Array |
| Unmount | None | All | None |
Children's useEffect hooks run before Parent's
Consider the example below, it's to explain a small point that Children's useEffect hooks will always run before Parent's useEffect hook.
const { useEffect } = React;
const Child = () => {
useEffect(() => {
console.log("Child useEffect ran");
});
return <p>Child</p>;
};
const App = () => {
useEffect(() => {
console.log("App useEffect ran");
});
return <Child />;
};
const rootEl = document.getElementById("root");
ReactDOM.render(<App />, rootEl);
Logs
Child useEffect ran
App useEffect ran
useEffect hooks are called Asynchronously
The example below demonstrates a really important point which is that useEffect hooks are called Asynchronously.
const { useEffect } = React;
const App = () => {
console.log("Before useEffect");
useEffect(() => {
console.log("Inside useEffect");
});
console.log("After useEffect");
return <h1>Hello World</h1>;
};
const rootEl = document.getElementById("root");
ReactDOM.render(<App />, rootEl);
Logs
Before useEffect
After useEffect
Inside useEffect
💡 Observation: Notice the "Inside useEffect" log is printed after the "After useEffect" log.
🚀 And this is because React calls useEffect asynchronously after React has finished rendering.
In other words useEffect doesn't run the moment you call it, it runs after React has completed rendering.
I will mention this point again twice in the coming section because I feel this is really important to understand.
Making API calls inside the useEffect hook
Quite often we make async requests to external APIs inside the useEffect hook. So, in this section we would observe the flow of our code in such a scenario.
const UserInfo = ({ userId }) => {
const [user, setUser] = React.useState(null);
const [error, setError] = React.useState(null);
console.log("%cBefore useEffect", "color: yellow");
React.useEffect(() => {
console.log("%cInside useEffect", "color: cyan");
setError(null);
(async function fetchUser() {
if (!userId) return;
try {
const res = await fetch(
`https://jsonplaceholder.typicode.com/users/${userId}`
);
const data = await res.json();
if (!Object.entries(data).length) throw new Error("No data found");
setUser(data);
} catch (e) {
setError("Something went wrong");
}
})();
}, [userId]);
console.log("%cAfter useEffect", "color: coral");
if (error) return <p>{error}</p>;
if (!user) return <p>Loading...</p>;
if (user) return <pre>{JSON.stringify(user, null, 2)}</pre>;
};
const UserSearchForm = ({ setUserId }) => {
const handleSubmit = (e) => {
e.preventDefault();
setUserId(e.target.elements.userId.value);
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="userId">User Id:</label>
<input type="text" id="userId" placeholder="Enter User Id" />
<button type="submit">Search</button>
</form>
);
};
const App = () => {
const [userId, setUserId] = React.useState("");
return (
<main>
<h1>Find User Info</h1>
<UserSearchForm setUserId={setUserId} />
{userId && <UserInfo userId={userId} />}
</main>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
Consider the above example, our focus is on the UserInfo component that makes async request to an external API.
Initially there are NO logs from the UserInfo component because it's not yet mounted (as the userId state is initially set to an empty string).
Let's search for a user with userId of 1.
Logs:
Before useEffect
After useEffect
Inside useEffect
Before useEffect
After useEffect
So, when you hit the search button, setUserId is called which causes a re-render and now for the first time the UserInfo component is rendered.
The UserInfo function is called and from there we have our first log "Before useEffect".
💡 Observation: Notice that the second log that we have is not "Inside useEffect" but its "After useEffect"
🚀 This is because useEffect runs asynchronously after React has finished rendering.
So, after the "After useEffect" log, React renders <p>Loading...</p> and then React calls the useEffect function.
Inside useEffect we get the "Inside useEffect" log printed.
Then we have setError(null), before you proceed further just think for a moment will this cause a re-render?
The answer is NO and its because error is currently null and its being set to null, which means the error state has not changed, so a re-render is not required (React is Smart folks!).
So, we move past setError(null) and then fetchUser is called, and once the data is fetched from the API, we call setUser with that data (assuming there's no error) which causes a re-render and because of which we get our last two logs printed.
Before we proceed to the next section I want you add one more log to the UserInfo component as shown below:
console.log("%cAfter useEffect", "color: coral");
if (error) return <p>{error}</p>;
console.log("%cAfter error check", "color: crimson");
if (!user) return <p>Loading...</p>;
if (user) return <pre>{JSON.stringify(user, null, 2)}</pre>;
Let's now search for a user with userId of a.
I don't want you to observe any logs here because its same as before (except from the one we just added).
We did this because we wanted to set our error state to something other than null.
(Clear the console before moving to the next section)
Let's again search for a user with userId of 1.
There are a lot more logs this time, let's knock them one by one.
Logs
Before useEffect
After useEffect
Inside useEffect
Before useEffect
After useEffect
After error check
Before useEffect
After useEffect
After error check
We already know why we have the first two logs, but notice that we didn't print the "After error check" log and this is because we still have the error state set to null, which again emphasises the same fact that useEffect is not called before React finishes rendering.
So, React first renders <p>{error}</p> and after that it calls the useEffect hook and we get the third log "Inside useEffect".
Now, this time when setError(null) is called, it will cause a re-render because error is not null currently.
So, because of the change in error state we get logs 4, 5 and 6. And this time since error is no more truthy, therefore we log "After error check".
And finally once the data is fetched from the API, we call setUser(data) which causes a re-render and we get the last three logs.
That's It! 🤘
Hope, you found this useful and learned something new. Let me know your thoughts in the comments.
Top comments (1)
Note: Cleanup of Parent runs before setup of Child.