DEV Community

Joanna Otmianowska
Joanna Otmianowska

Posted on

Multiple or one useEffect?

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)

Collapse
 
bjjprogrammer profile image
Niller Yanes

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.

Collapse
 
joannaotmianowska profile image
Joanna Otmianowska

I am really happy that my article helped :)

Collapse
 
boymurodovuzcoder profile image
Samandar Boymurodov

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.

Collapse
 
joannaotmianowska profile image
Joanna Otmianowska

Thanks! Great that you mention sequential relation, that is also important

Collapse
 
anapalmeida profile image
Ana Almeida

This is such a simple and informative article. Thank you for sharing.

Collapse
 
joannaotmianowska profile image
Joanna Otmianowska

Thank you! Glad I could help!