A React screen feels slow. How do you find and reduce unnecessary re-renders?

What the interviewer wants to hear

• Measure first with the React DevTools Profiler and the browser Performance panel
• Move state down closer to where it is used, or lift content up as children
• Keep props stable with useMemo and useCallback and use React.memo where it pays off
• Avoid new object or array values in context and split contexts
• Consider the React Compiler, virtualization for long lists, and transitions for heavy updates

Model answer

I measure before changing anything. The React DevTools Profiler shows which components render, how often and why, and the Performance panel shows whether the cost is in rendering, layout or something else. Common fixes start with structure rather than memoization: I move state down to the component that needs it, so a typing field does not re-render the whole page, or pass heavy subtrees as children so they are not re-created. Next, I look at referential equality. Inline objects and functions passed to memoized children or as a context value break memoization, so I stabilise them with useMemo and useCallback, wrap expensive pure components in React.memo, and split large contexts. If the project uses the React Compiler, much of this memoization happens automatically. For long lists I use virtualization, and for heavy updates triggered by typing I use startTransition or useDeferredValue. I confirm each change with the profiler again.

More medium Frontend Developer questions

• Explain the JavaScript event loop, including microtasks and macrotasks.
• How do you decide where to keep state in a React app: local state, context, a store, or a server-cache library?
• A page has a poor LCP score. How would you investigate and fix it?
• What testing strategy would you use for a frontend application?
• Explain client-side rendering, server-side rendering and static site generation. When would you use each?
• What happens between typing a URL in the browser and seeing the page rendered? Focus on the frontend side.
• How do you handle loading, error and empty states when a screen fetches data from an API?
• How do you use TypeScript effectively in a React codebase?
• How would you handle user authentication and tokens in a single-page app or Next.js frontend?