In this article I will share my experience about making React more eventful, tell about alternatives to useEffect hook and how to not mess up with it.

Introduction

React is designed with a thought in mind that its components will be written in a natural JS code, or at least it's supposed to.

But what sometimes I see it using useEffect and useState while there is no need for them at all.

I'm not going to talk about how bad the knowledge basis of those developers is, instead let's figure out actual React intentions and how to make your life easier.

There is a good video about this topic, I recommend you watch it as well to understand this article better or caught my own mistakes - https://www.youtube.com/watch?v=bGzanfKVFeU&ab_channel=BeJS.

useEffect

First, let's briefly understand what useEffect is and why we need it in React.

useEffect is a React hook created to react to a values change.
Usually, this is helpful for external coming values: Browser or third-party API, event handling or component props.

By the official documentation:

useEffect is a React Hook that lets you synchronize a component with an external system.

no useEffect

Let's imagine there is no useEffect right now, how would you react to a value change within a component?

The thing is you always get a value from a user (i.e. text input) by passing a function and getting an access to the value in it. So if shortly, you can react a value change without any useEffects.

The useEffect comes in mind when there is useState that is already bound to a user input, this is easy to follow a bad practice by adding a useEffect instead of little refactoring.

If you really want to grasp useEffect follow the documentation, they have a lot of good practices.

Understand useEffect

When you're solving a problem of local component data maintenance, try to not think about useEffect, think about other hooks, for example the useMemo or useCallback, but same as for useEffect - don't overuse them too. That may surprise you, but you might not need any hooks at all if operations are simple, always appeal to a cleaner code first.

Remember, useEffect is a tool not a magic wand, not a react cancer, it's very powerful tool if you use it meaningfully.

Sometimes though, it is used with internal and external states at the same time, so you just need to find that feeling of what you can and can't do with useEffect.

This is a really discussed topic, you can find a lot discussions and practices on it.

• React Documentation
• Goodbye useEffect
• Detailed useEffect guide

Obscure useEffect

Another good practice practice is to "hide" a useEffect block, e.g. a boilerplate code like store subscriptions, event handling or complex structure.

React is about creating UI, so when you see a component, you're focusing on the logic and how it affects the UI. It becomes challenging to reason about the code when amount of logic increases.

In this case you may have to use several useEffects to implement required features. The solution is simple - code splitting.
Create custom hooks and use popular libraries like react-use, you don't need to implement everything on your own, sometimes you need to delegate to one that serves it better.

Instead of seeing all the code right in one component, it would become really easy to understand the code if you see several custom hooks with clear name without exposed useEffects, even if they filled with barely understandable logic.

Thanks

Thank you for reading!

This article lacks code examples, so if you'd like to help, propose yours - I will add them.