React Interview Questions: Performance Optimization

Detecting Performance Issues

Tools like React Developer Tools Profiler and browser performance monitors help detect slow components and excessive renders.

• Use React Profiler to measure render times.
• Check component update frequency.
• Analyze bundle size and network requests.

Memoization Explained

Memoization caches the result of expensive function calls and returns the cached result when the same inputs occur again.

React.memo wraps a component to prevent re-rendering if props have not changed.

• Use React.memo for functional components.
• Use useMemo to memoize computed values.
• Use useCallback to memoize functions.

Lazy Loading Components

Lazy loading defers loading of components until they are needed, improving initial load performance.

• Use React.lazy to dynamically import components.
• Wrap lazy components with Suspense to show fallback UI during loading.

How do you prevent unnecessary re-renders in React?

You can prevent unnecessary re-renders by using React.memo to memoize components, useMemo to memoize expensive calculations, and useCallback to memoize functions passed as props. Also, avoid changing props or state unnecessarily.

What is React.lazy and how does it improve performance?

React.lazy allows you to load components lazily through dynamic import(). This reduces the initial bundle size and speeds up the initial load time by loading components only when they are needed.

When should you use useMemo in React?

Use useMemo to memoize expensive calculations or derived data that should only recompute when dependencies change. This avoids costly recalculations on every render.