Performance Optimization

Learn strategies to optimize the performance of your React applications.

1. Why Optimize Performance?

Performance optimization ensures that React applications run smoothly, providing a better user experience and reducing unnecessary computations.

  • Improved User Experience: Faster applications lead to happier users.
  • Better Resource Management: Reduce memory and CPU usage.

2. Using React.memo

The React.memo higher-order component (HOC) prevents unnecessary re-renders of functional components by memoizing their output.

import React, { useState } from 'react';

const ChildComponent = React.memo(({ count }) => {
    console.log('ChildComponent rendered');
    return 
Count: {count}
;
});

function ParentComponent() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');

    return (
        

            
            
             setText(e.target.value)}
                placeholder="Type something"
            />
        

    );
}

export default ParentComponent;

Explanation: The ChildComponent only re-renders if the count prop changes, thanks to React.memo.

3. Lazy Loading Components

Lazy loading defers the loading of non-essential components to improve initial load time:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
    return (
        

            
Welcome

            Loading...
}>
                
            
        

    );
}

export default App;

Explanation: The LazyComponent is only loaded when needed, reducing the initial bundle size.

4. Avoid Anonymous Functions

Using anonymous functions directly in JSX can cause performance issues:

function App() {
    const handleClick = () => console.log('Clicked!');

    return ;
}

Explanation: Always use defined functions like handleClick instead of inline anonymous functions to prevent re-creation on every render.

5. Using the useCallback Hook

The useCallback hook memoizes functions to prevent unnecessary re-creation:

import React, { useState, useCallback } from 'react';

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

    const increment = useCallback(() => {
        setCount((prevCount) => prevCount + 1);
    }, []);

    return ;
}

export default Counter;

Explanation: The increment function is memoized and does not change unless its dependencies change.

6. Best Practices

  • Use React.memo for pure functional components.
  • Leverage useCallback and useMemo to optimize performance.
  • Avoid passing inline functions or objects as props.
  • Implement lazy loading for non-critical components.
  • Minimize re-renders by organizing state logically.

Additional Resources