How to Stop Unnecessary Re-Renders in React — Part 2: Common Mistakes

In this part, let’s look at common mistakes that cause unnecessary re-renders in React and how you can avoid them.

Passing Inline Functions or Objects as Props

// This will cause child components to re-render every time
<Child onClick={() => console.log('Clicked')} />

✅ Instead, memoize the function using useCallback().

❌ Not Using React.memo for Pure Functional Components

const Child = ({ data }) => {
  return <div>{data.value}</div>;
};

✅ Wrap it with React.memo() if data doesn't change frequently.

❌ Overusing Context API for Frequent Changes

Using Context for high-frequency updates causes all consumers to re-render.
✅ Use context wisely or consider state management libraries like Redux or Zustand for complex state.

❌ Incorrect use of Keys in Lists

// Using index as key can lead to re-render issues
{items.map((item, index) => (
<li key={index}>{item}</li>
))}

✅ Use unique IDs if available.

By avoiding these mistakes, you’ll make your React applications faster, smoother, and more maintainable.

Stay tuned for more tips and real-world React scenarios!