React antipatterns to avoid

Here are some of the antipatterns most commonly seen in React applications and how to fix them. These antipatterns will make your codebase a nightmare to work with if you’re don’t learn to recognize and prevent them at their early stages.

Putting everything in Redux

Redux is awesome. It optimizes performance behind the scenes and lets us easily tap into the global state of the application.

The problem is that once new developers learn Redux, they start using it like a magic wand to solve all of their issues.
There are several drawbacks with this approach:

• You are code loses intent. If everything is in Redux, it’s not clear if your code is supposed to have local or global scope. It’s trickier to make changes because you’re less confident about the parts of the app that will be affected.
• Performance degrades when you use Redux for frequent events, like tracking form input. Since Redux affects the global state of the app, it is guaranteed to cause more re-renders.

The rule of thumb: Only use Redux for truly global data, like user session or app theme. For anything else, I like to create contexts for specific parts of the app instead.

Storing everything as a state

Another issue that new developers run into is under-utilizing the concept of derived state.

A lot of variables can be computed on the fly. For example, say you have an array of checkbox items. You don’t need to store checkedCount in the state. You can derive checkedCount by going through the array of items and filtering the checked ones on each render.

The rule of thumb: Before storing a variable in the state, ask yourself: “Can I somehow derive this variable based on other data I’m already storing?”

Passing props using spread operator everywhere

I’ve seen this trick used a lot in React applications.

You pass props to a child component using {...props}. It looks neat, and you might think you're making your code more concise. But the truth is that over time your code will be less predictable and harder to understand.