The useEffect hook in React and its misconceptions

Main content of email from Apr 4th, 2025

I learned React around 3 years ago when I started working with a 5-year-old legacy codebase. Around half of the project used class components, and the other used the newer and recommended function components. So I had to know and understand both in this context.

One of the newer concepts that were exclusive to function components was something called "hooks." Hooks are special functions we can use to access specific features to manage state, cache function results, etc.

One of the most famously misunderstood concepts in React is a little hook we all know and hate love called useEffect.

This is what it looks like:

useEffect(()=>{
const connection = createConnection(serverUrl,roomId);
connection.connect();
return()=>{
connection.disconnect();
};
}, [serverUrl, roomId]);

At its core, useEffect is a magic function that's made up of some setup code and some optional cleanup code. These pieces of code run whenever one of the values in the dependency array changes.

Understanding the way this hook works isn't the problem. What has caused the most discourse around it is when and in what situations it should be used.

One of the reasons why I've been itching to re-read the newer react docs (which I haven't done since they were released 2 years ago) is because I noticed the language, examples, and use cases around it have completely evolved since I first learned React.

I remember when doing React tutorials, the two most important hooks you always learned first were useState and useEffect. These functions were thought to be "the heart of React". useState was for saving and updating the state. useEffect was for "reacting" the state and prop changes. Together, they made up the main idea behind react thinking.

Compare that to now, where there's a dedicated page in the documentation explaining all the reasons and scenarios where you don't need an useEffect hook.​

So... what happened?

Well, I compared the old React docs on useEffect with the new ones to find out. Here are three details I found interesting between the two.

1. The old React docs make a comparison between some lifecycle methods from class components and the useEffect hook. It actually has a tip that tells you, "useEffect is like componentDidMount, componentDidUpdate, and componentWillUnmount combined.". They did this, I imagine at the moment, as an easy way to help devs understand and transition to the newer functional component way of writing React code.
   ​
   The new React docs do not do this. In fact, they go out of their way to tell you the lifecycle of the useEffect hook is different than that of a component. This idea completely changed the mental model I used to have around the useEffect hook. It has its own lifecycle and, thus, is separate from the component. It has a different purpose. Speaking of different purposes...
   ​

2. The old React docs made the use case for useEffect pretty vague. "The Effect Hook lets you perform side effects in function components" was the original line mentioned in the docs.
   ​
   Compare that with the new docs that beautifully explain what the hook is for: "useEffect is a React Hook that lets you synchronize a component with an external system." This single line gives you an instant tell that lets you know when you should (or shouldn't) be using the hook. The docs even give you a bunch of examples of what an "external system" could be.
   ​

3. In the new React docs, useEffect is considered an "escape hatch" from React. This is a concept around the useEffect hook that did not exist in the old docs.
   ​
   ​Escape hatches are handy for whenever you need to do something outside of the render cycles of React. The useRef hook is probably the best example and the first thing that comes to mind when the word "escape hatch" pops up. The idea that useEffect is an escape hatch is a weird one, but it makes sense when you think that it's supposed to be used to sync with external systems. Ergo, outside of react.

It took me having to sit down for a few hours to update the way I thought about useEffect. It's still wild to me how much things have changed and the many places I probably accidently misused the hook itself.

Ah well, tis the life of a React dev 😄

I guess I'll end this very long email by linking a LinkedIn post I made last week on some of the things I enjoyed about the newer documentation that I didn't mention here. And if you want a better guide on common misconceptions and myths about useEffect, I'd recommend this article by Kent C. Dodds​

Have a wonderful weekend!