React Performance Optimization Techniques

Performance is crucial for user experience. Learn advanced techniques to optimize your React applications.

1. Memoization with React.memo

Prevent unnecessary re-renders of components:

tsx
import { memo } from 'react';

const UserCard = memo(({ user }) => {
  return <div>{user.name}</div>;
});

export default UserCard;

2. useMemo Hook

Memoize expensive calculations:

tsx
import { useMemo } from 'react';

export default function ProductList({ products }) {
  const total = useMemo(() => {
    return products.reduce((sum, p) => sum + p.price, 0);
  }, [products]);

  return <div>Total: {total}</div>;
}

3. useCallback Hook

Memoize callback functions:

tsx
import { useCallback } from 'react';

export default function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = useCallback((text) => {
    setTodos(prev => [...prev, { id: Date.now(), text }]);
  }, []);

  return <TodoForm onAdd={addTodo} />;
}

4. Code Splitting and Lazy Loading

Use dynamic imports to load components only when needed:

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

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

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

5. Virtual Scrolling

Render only visible items in large lists:

tsx
import { FixedSizeList as List } from 'react-window';

export default function LargeList({ items }) {
  return (
    <List height={600} itemCount={items.length} itemSize={35} width="100%">
      {({ index, style }) => <div style={style}>{items[index]}</div>}
    </List>
  );
}

Best Practices

1. Profile Your App - Use React DevTools Profiler
2. Avoid Inline Objects/Functions - Define outside components
3. Use Keys Properly - Essential for list rendering
4. Split Large Bundles - Implement code splitting early
5. Monitor Bundle Size - Use webpack-bundle-analyzer

Conclusion

By applying these optimization techniques, you'll significantly improve your React application's performance and user experience.