Member-only story

10 Common Mistakes React Developers Make (And How to Avoid Them)

Simuratli
4 min readSep 10, 2024

1. Using index as a Key in Lists

The Mistake: If we use the array index as a key in a list can cause problems when items are reordered, removed, or inserted. This leads to inefficient rendering and potential UI bugs.

How Can We Avoid It: Use a unique identifier for keys, such as an item ID or another value that’s guaranteed to be unique.

// Avoid this:
items.map((item, index) => <ListItem key={index} item={item} />);

// Instead:
items.map(item => <ListItem key={item.id} item={item} />);

2. Overusing State

The Mistake: We often store too much information in React’s state, leading to excessive re-renders and making the app sluggish.

How to Avoid It: Only store data in the component state if it affects rendering. Derived or computed values can be calculated in the render function useMemo instead of keeping them in the state. For example, instead of saving filtered results in state, calculate them directly in the rendering logic.

const filteredList = useMemo(() => items.filter(item => item.active), [items]);

3. Mutating State Directly

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Simuratli
Simuratli

Written by Simuratli

MSc. High Energy and Plasma Physics | B.A. Computer Engineering | Content Creator. https://bento.me/simuratli

Responses (4)

Write a response

Skipping testing altogether or writing inadequate tests for components can lead to bugs slipping into production.

Advice that everyone forget to share with newcomers

Felt like I’ve been guilty of a few of these mistakes myself! 😅 I remember struggling with unnecessary re-renders in React and not realizing that optimizing useEffect could make such a huge difference. That part definitely hit home for me. Also…