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

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