Transcript

Welcome to the Explainer. Today we are diving deep into one of React's most powerful, and let's be honest, most misunderstood hooks use effect. You've probably heard this right, It's all over the place in the React community, but honestly, it's just not the whole story. The truth is you effect is an incredible tool, but it's a specialist. It's not about hook, it's just used for the wrong jobs all the time. O today we're going to learn how to use it the right way by digging into common mistakes from over 50 real world code bases. OK, so let's get into it. The absolute best way to stop making mistakes is to build the right mental model from the get go before you even think about writing a single line of code. O here is the most important thing you need to hear today. Stop. Just stop thinking of use effect as a replacement for old lifecycle methods like component did mount. That's not its job. It's real purpose is to synchronize your react component with something outside of react world. So before you even type use effect. Just pause and ask yourself these three simple questions. One, is there an external system involved like an API or the browsers Dom? 2 what's making me sync U? Is it a render or something else? And three, is there anything I need to clean up afterward? Seriously, this little checklist will save you a world of headaches. Alright, let's get into our first big category of common mistakes. And they all circle around what is maybe the most important part of this hook. That little dependency array. Ah, a classic. If you forget to add the dependency array, your effect is going to run after every single render. So you set the state, which triggers A rerender, which runs the effect again, which sets the state again, and boom, you've just created an infinite loop. Here's another common 1 you use an empty dependency array, but your effect. Actually depends on a prop O imagine that user ID pro changes. Well, if it's not in the array, the effect isn't going to run again. You'll be stuck fetching data for the old stale user. You have to tell React what to watch for, and this one is a bit more subtle, but it's a huge trap. See, objects and functions get recreated from scratch on every single render. So even if the data inside is exactly the same, it's address in memory is different, and that's going to make your effect run over and over again for no reason. The fix just depend on. Primitive values like an ID or a string whenever you can. They're stable. Next U let's talk about a major anti pattern. This is when you use an effect to calculate some piece of state, when really there's a much much simpler way. I mean, just look at this. We're using state and an effect just to filter a list. It's totally unnecessary. If you can calculate a value directly from the Ros or state you already have. Just do it right there in the body of your component. No use state, no use effect, and best of all, no extra pointless renders. Now this is a really key concept to grasp. You often don't need an effect to reset some state when a prop changes. Why? Because if your component is rerendering with a new hackathon. Did prop for example, react is already giving you a fresh render, which means all your use state hooks are already reset to their initial values. The effect is just doing extra work. OK let's tackle one of the sneakiest sources of bugs and just plain weird behavior. And react apps memory leaks. And the solution is the part of the hook that everyone seems to forget the cleanup function. You know, think about it like this. If you're effect sets something U like a subscription or a timer or an event listener. You have to tell React how to tear it down when it's done. That function you return from your effect. That's the instruction manual for the cleanup crew, and it is absolutely essential. This one is huge. Imagine a user clicks from page one to page 2 really, really fast. Without a cleanup. The request for page one data might actually finish after the request for page 2, and it'll just overwrite the correct data with old stuff. This is called a race condition. By using an abort controller and calling abort in our cleanup function, we guarantee that only the very last request. Is allowed to update our state. OK, if you have ever, and I mean ever seen this warning in your console, I can practically guarantee it's because you have an effect that's trying to sit state after the component has already been removed from the screen. This warning is a giant blinking red light screaming at you. Hey, you're missing a cleanup function. All right, finally, let's talk about using the right tool for the right job. You know, use effect is so well known that it tends to get grabbed for everything, even when other hooks or just plain old functions are much better. The key difference here is the trigger. Just ask yourself, does my code need to run because the component rendered? If so, that's an effect. But does it need to run because the user clicked a button? Well, that's an event handler. Don't use an effect to just watch for a state change that a user caused. Just put your logic right inside the click handler itself. Now, these two hooks, they're almost identical, but their timing is crucially different. Use effect runs after the browser has painted pixels to the screen, which is usually fine. But if your effect needs to measure something in the Dom and then immediately change it, you might see a weird flicker. In that specific case, use Layout effect as your friend. It runs before the paint, so you can make those changes synchronously and the user never sees the flicker. OK, now for the really cool part. Let's look to the future. The React Core team knows these dependency issues can be tricky, so they're introducing a brand new hook in React 19 to solve one of the biggest pain points. So check out this analytics example. We only want to log in event when the user's journey changes, right? But to log the event, we also need the latest step and metadata. In the old way, we'd have to list all three in the dependency array, which would cause our effect to run way too often. With Use effect event, we can wrap our logic in this special function that always has access to the latest props without them needing to be dependencies. It's a total game changer. So here's the bottom line. Use effect isn't a bad hook. It has a very specific, very precise. Job description. It is the bridge between your React components an the world outside of React. And when you use it for that and you manage your dependencies, your state, and your cleanups correctly, it's actually an incredibly elegant and powerful tool. Now that you have this framework, I really encourage you go back and take a look at your own projects. How are you using these effects? Because by fixing even just a few of these common pitfalls, you can make your apps more stable, more performant, and a whole lot easier to debug.