Common React Performance Mistakes and How to Avoid Them

React is incredibly fast, but poor component architecture and unnecessary re-renders can quickly make applications feel slow and unresponsive.

One of the most common causes of poor React performance is unnecessary component rendering.

The Re-render Problem

When a parent component updates its state, React re-renders all child components by default, even if their props never changed.

function App() {

    const [count, setCount] = useState(0);

    return (
        <div>
            <button onClick={() => setCount(c => c + 1)}>
                Increment
            </button>

            <ChildComponent />
        </div>
    );
}

This behavior becomes expensive in large applications with heavy UI components and dashboards.

React.memo

React.memo prevents components from re-rendering when props remain unchanged.

export default React.memo(ChildComponent);

Why React.memo Sometimes Fails

Functions and objects are recreated during every render, producing new references in memory.

const handleClick = () => {
    console.log('clicked');
};

Even if the logic stays the same, React sees a completely new function reference.

useCallback

useCallback memoizes functions and keeps references stable between renders.

const handleClick = useCallback(() => {
    console.log('clicked');
}, []);

useMemo

useMemo memoizes expensive calculations and object references.

const filteredUsers = useMemo(() => {

    return users.filter(user =>
        user.name.includes(search)
    );

}, [users, search]);

When to Use React.memo

• Large lists
• Dashboard widgets
• Complex reusable components
• Performance-heavy interfaces

When to Use useCallback

• Passing functions to memoized components
• Preventing unnecessary child renders
• Stabilizing event handlers

When to Use useMemo

• Filtering large datasets
• Sorting operations
• Expensive calculations
• Memoizing objects and arrays

Best Practices

• Avoid premature optimization
• Measure performance first
• Use React DevTools Profiler
• Optimize only real bottlenecks

Conclusion

React.memo, useCallback, and useMemo are essential tools for building fast and scalable React applications.

Use them strategically to reduce unnecessary re-renders and improve application responsiveness.