You wrote a few components with Hooks. Maybe even a small app. You’re mostly satisfied. You’re comfortable with the API and picked up a few tricks along the way. You even made some custom Hooks to extract repetitive logic (300 lines gone!) and showed it off to your colleagues. “Great job”, they said.
But sometimes when you
useEffect, the pieces don’t quite fit together. You have a nagging feeling that you’re missing something. It seems similar to class lifecycles… but is it really? You find yourself asking questions like:
- 🤔 How do I replicate
- 🤔 How do I correctly fetch data inside
useEffect? What is
- 🤔 Do I need to specify functions as effect dependencies or not?
- 🤔 Why do I sometimes get an infinite refetching loop?
- 🤔 Why do I sometimes get an old state or prop value inside my effect?
When I just started using Hooks, I was confused by all of those questions too. Even when writing the initial docs, I didn’t have a firm grasp on some of the subtleties. I’ve since had a few “aha” moments that I want to share with you. This deep dive will make the answers to these questions look obvious to you.
To see the answers, we need to take a step back. The goal of this article isn’t to give you a list of bullet point recipes. It’s to help you truly “grok”
useEffect. There won’t be much to learn. In fact, we’ll spend most of our time unlearning.
It’s only after I stopped looking at the
useEffect Hook through the prism of the familiar class lifecycle methods that everything came together for me.