When I started working with React hooks, I had a tendency to put everything that was based on component change into one useEffect. I was used to put it into lifecycle methods like componentDidMount, componentDidUpdate or componentWillUnmount. It was natural for me that I need to show my component what to do on the particular stage - so something happens with mounting, something with unmounting etc. I based the logic on the component lifecycle, not on what this logic does. Therefore I ended up having completely unrelated logic in one useEffect just because I wanted all of that stuff to happen with component mount. Fortunately, I quickly realised that I was wrong.
You can have multiple useEffects in your code and this is completely fine! As hooks docs say, you should separate concerns. Multiple hooks rule also applies to useState - you can have multiple useState in one component to separate different part of the state, you don't have to build one complicated state object.
Going back to useEffect - reading the docs I linked earlier made me change my approach to managing component behaviour using hooks. Right now I always ask myself first if things that I do in one useEffect are really connected. If not, I try to extract the logic to another useEffect. Thanks to that I can easily see what happens to the code and I can avoid running some code with no reason (e.g. maybe something is needed to be done only with component first mount).
However, I try to be mindful and not simply put every single thing in a separate useEffect. If one data relies on another, I would probably fetch it in one useEffect to make sure that I have both things in place on time. The same goes with loading - I put changes related to loaders next to the things that caused them. This way I can see when the loader state is changing and what's causing that.
Did you also have problems with using multiple useEffect or did you find it easy from the beginning? Let's talk!
Top comments (7)
Yes, thank you very much for this great article, I had exactly this same doubt, the link you share helps to complement what you propose, I thank you very much.
I am really happy that my article helped :)
Nice article, Joanna. Since I have always been using useEffect from the first day of my React journay, it feels normal to use multiple useEffect hooks.
The ordering of useEffect hooks matter. If there is an sequential relation between your useEffect hooks, you need to be careful to put them in the correct order, especially when you are also using useLayoutEffect.
Thanks! Great that you mention sequential relation, that is also important
This is such a simple and informative article. Thank you for sharing.
Thank you! Glad I could help!