React Performance Optimization - Techniques and Best Practices

Optimize a React Component with React.memo

Take a functional component that re-renders unnecessarily and wrap it with React.memo. Verify that it only re-renders when props change.

Expected output: Component renders only when its props change, reducing unnecessary renders.

Hint: Identify props that cause re-renders and apply React.memo to the component.

Implement Lazy Loading for a Route Component

Use React.lazy and Suspense to lazy load a route component in a React Router setup.

Expected output: Route component loads asynchronously with a loading indicator shown initially.

Hint: Wrap the lazy-loaded component with Suspense and provide a fallback UI.

Use useMemo to Optimize Expensive Calculation

Memoize an expensive calculation inside a component using useMemo to avoid recalculating on every render.

Expected output: Expensive calculation runs only when dependencies change, improving render performance.

Hint: Pass dependencies array to useMemo to control when recalculation happens.

React.memo is a higher-order component that memoizes a functional component's rendered output, preventing re-renders if props haven't changed. Use it to optimize pure components that render the same output for the same props.

React.lazy enables lazy loading of components, which splits code into smaller chunks loaded on demand. This reduces the initial bundle size and improves load times.

useMemo memoizes the result of a function to avoid expensive recalculations, while useCallback memoizes a function instance to prevent unnecessary re-creation, useful when passing callbacks to child components.