Common React Performance Mistakes

React is fast by default, but poor component architecture and unnecessary re-renders can make applications slow and unresponsive.

The biggest React performance problem is unnecessary component rendering.

Why React Applications Become Slow

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

Basic Re-render Problem

function App() {

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

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

            <ChildComponent />
        </div>
    );
}

Every state update causes ChildComponent to render again unnecessarily.

React.memo

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

export default React.memo(ChildComponent);

The Function Reference Problem

React.memo fails when functions are recreated during every render.

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

Each render creates a new function reference.

useCallback

useCallback memoizes functions and keeps stable references 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]);

Why useMemo Matters

Without useMemo, expensive filtering and sorting operations execute on every render.

When to Use React.memo

• Large lists
• Heavy UI components
• Dashboard widgets
• Reusable complex components

When to Use useCallback

• Passing functions to memoized children
• Stable event handlers
• Preventing unnecessary renders

When to Use useMemo

• Expensive calculations
• Filtering and sorting
• Large datasets
• Stable object references

Best Practices

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

Conclusion

React.memo, useCallback, and useMemo are powerful tools for reducing unnecessary re-renders and improving React application performance.

Use them strategically only when performance issues actually exist.