React Performance Optimization Techniques

Lazy Loading Strategies

Image Lazy Loading

Implement lazy loading for images to improve initial page load:

const LazyImage = ({ src, alt, placeholder }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isInView, setIsInView] = useState(false);
  const imgRef = useRef();
  
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsInView(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );
    
    if (imgRef.current) {
      observer.observe(imgRef.current);
    }
    
    return () => observer.disconnect();
  }, []);
  
  return (
    

      {isInView && (
         setIsLoaded(true)}
          style={{
            opacity: isLoaded ? 1 : 0,
            transition: 'opacity 0.3s ease'
          }}
        />
      )}
      {!isLoaded && placeholder}
    
  );
};

Component Lazy Loading

Load components only when needed:

const LazyComponent = () => {
  const [Component, setComponent] = useState(null);
  
  useEffect(() => {
    // Load component after initial render
    import('./HeavyComponent').then(module => {
      setComponent(() => module.default);
    });
  }, []);
  
  if (!Component) {
    return 
Loading component...
;
  }
  
  return ;
};

Virtualization

Implement virtual scrolling for large lists to improve performance:

const VirtualizedList = ({ items, itemHeight, containerHeight }) => {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef();
  
  const visibleStart = Math.floor(scrollTop / itemHeight);
  const visibleEnd = Math.min(
    visibleStart + Math.ceil(containerHeight / itemHeight) + 1,
    items.length
  );
  
  const visibleItems = items.slice(visibleStart, visibleEnd);
  
  const handleScroll = useCallback(() => {
    setScrollTop(containerRef.current.scrollTop);
  }, []);
  
  return (
    

      

        {visibleItems.map((item, index) => (
          

            
          
        ))}
      
    
  );
};

State Management Optimization

State Colocation

Keep state as close to where it's used as possible:

// Bad: Global state for local UI
const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [formData, setFormData] = useState({});
  
  return (
    

      

      
      
    
  );
};

// Good: State colocation
const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [formData, setFormData] = useState({});
  
  // Modal manages its own state
  return (
    // Modal JSX
  );
};

Context Optimization

Split context to prevent unnecessary re-renders:

// Bad: Single context for everything
const AppContext = createContext();

const AppProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [notifications, setNotifications] = useState([]);
  
  return (
    
      {children}
    
  );
};

// Good: Split contexts
const UserContext = createContext();
const ThemeContext = createContext();
const NotificationContext = createContext();

// Each context only re-renders components that use it
const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  return (
    
      {children}
    
  );
};

Performance Monitoring

Monitor your application's performance to identify bottlenecks:

// React DevTools Profiler
import { Profiler } from 'react';

const onRenderCallback = (id, phase, actualDuration) => {
  console.log('Component:', id);
  console.log('Phase:', phase);
  console.log('Duration:', actualDuration);
  
  // Send to analytics
  analytics.track('component-render', {
    component: id,
    phase,
    duration: actualDuration
  });
};

const App = () => {
  return (
    
      
    
  );
};

// Custom performance hook
const usePerformanceMonitor = (componentName) => {
  const renderCount = useRef(0);
  const lastRenderTime = useRef(Date.now());
  
  useEffect(() => {
    renderCount.current += 1;
    const now = Date.now();
    const timeSinceLastRender = now - lastRenderTime.current;
    
    if (timeSinceLastRender < 100) {
      console.warn(`${componentName} re-rendered quickly: ${timeSinceLastRender}ms`);
    }
    
    lastRenderTime.current = now;
  });
};

Performance Best Practices

Key Principles

• Avoid unnecessary re-renders: Use React.memo, useMemo, and useCallback appropriately
• Implement code splitting: Split your application into smaller chunks
• Use lazy loading: Load components and images only when needed
• Optimize state management: Keep state close to where it's used
• Implement virtualization: For large lists and tables
• Monitor performance: Use React DevTools and custom monitoring
• Optimize bundle size: Use tree shaking and eliminate unused code
• Use production builds: Enable minification and dead code elimination

Common Pitfalls to Avoid

• Over-memoization: Don't memoize everything - only expensive operations
• Inline object creation: Avoid creating new objects/arrays in render
• Large context values: Split context to prevent unnecessary re-renders
• Missing dependency arrays: Ensure useEffect and useCallback have correct dependencies
• Rendering large lists: Always use virtualization for large datasets

Conclusion

React performance optimization is an ongoing process that requires careful consideration of your application's specific needs. By implementing these techniques and best practices, you can significantly improve your application's performance and user experience.

Remember that premature optimization can be counterproductive. Always measure performance before and after implementing optimizations to ensure they're having the desired effect. Use React DevTools Profiler and other monitoring tools to identify actual bottlenecks in your application.

Related Articles