React / Performance Interview Questions 2026

A developer puts async code inside useEffect by returning an async arrow function: useEffect(() => async () => {...}). Why is this wrong?

What is React.StrictMode and what bugs does it help catch?

How do you implement dark mode in a React app that persists across refreshes, respects OS preference, and allows manual override?

Your React app uses React Router. Users report the browser back button doesn't work after programmatic navigation. What are the likely causes?

Your Next.js app shows 'Loading...' forever on first visit but works fine on refresh. What's happening?

How does React's useCallback differ from useMemo? A developer uses useCallback everywhere to 'optimize performance.' Is this correct?

Your React SPA loads slowly on first visit (8 seconds). Bundle size is 5MB. How do you optimize?

What is the difference between useEffect with no dependency array, empty array, and with dependencies?

What are Error Boundaries in React and why can't they catch errors in event handlers?

Explain the React context API pattern for theming. What is the pitfall when the context value is an object?

Explain how Suspense and lazy loading work together in React for code splitting.

What is the difference between controlled and uncontrolled components? When would you choose uncontrolled?

Your React app has a form with 50 fields. On each keystroke, the entire form re-renders taking 200ms. How do you fix this?

Explain how you would handle authentication in a Next.js app. Compare NextAuth vs rolling your own JWT solution.

You're building a feature flag system in React. Flags come from an API and affect which components render. How do you implement this so: flags load once at startup, components don't re-render when irrelevant flags change, and engineers can easily wrap any component.

What is the difference between React.memo, useMemo, and useCallback? Give an example where each is the right tool.

Explain the difference between useLayoutEffect and useEffect. Give a real scenario where using useEffect instead of useLayoutEffect causes a visible bug.

How does React's reconciliation algorithm (Fiber) decide whether to update or replace a component?

Your team needs to migrate a large class component codebase to hooks. A senior dev says 'just convert everything to hooks.' What risks does this carry and how would you approach the migration safely?

You need to implement infinite scroll in React. The list fetches 20 items per page. Users scroll down, new items load. When they scroll back up, previously loaded items should still be there. How do you implement this correctly?

After adding React DevTools Profiler, you see a component called UserAvatar re-rendering 200 times per second even when no user data changes. What are the most likely causes?

Your React component tree is 8 levels deep. A state change at level 1 needs to reach a component at level 8. Without Redux or Context, you're prop drilling through 6 intermediate components. What are your options?

You're asked to build a drag-and-drop kanban board in React. The board has 10 columns and potentially 1000 cards total. Describe your complete implementation approach including performance considerations.

A product manager reports that your React app works fine in Chrome but crashes on Safari iOS 15. You cannot reproduce it locally. How do you debug this?

When would you choose React over Vue or Angular for a new project? What are the actual tradeoffs, not just marketing?

Your React app uses code splitting with React.lazy. On slow connections, users see a blank screen while the chunk loads. How do you improve this experience without removing code splitting?

Your React form has complex validation: some fields depend on others, some validation is async (API calls). How do you architect this without the form becoming unmanageable?

Explain how React's reconciliation algorithm decides what to re-render. A senior dev claims 'adding a key prop always makes things faster.' Is he right?

Explain how React's key prop affects performance and correctness. Give an example where using array index as key causes a bug.

You deploy a React app and users report a blank white screen on IE11. Your CI/CD passes. What's happening and how do you fix it?

A user reports that typing in a search input feels 'laggy' only when there are many results showing below. Nothing in the input code changed. Explain and fix.

Your team is arguing about whether to use Context API or Redux for a mid-sized app with 15 screens. Some data is global (user auth), some is page-level. Make the architecture decision and justify it.

You're asked to implement 'skeleton loading' for a complex page with 5 different data sources. Each section should show a skeleton while its data loads, then transition smoothly. How?

You notice your React app's memory usage grows from 80MB to 400MB over 30 minutes of normal usage. There are no error logs. How do you identify and fix the memory leak?

Your React app uses CSS-in-JS (Styled Components). After migrating to Next.js App Router (Server Components), styles are missing on first render. Why?

A React form with 30 fields re-renders every field on every keystroke in any single field. No memoization exists. You cannot refactor to a form library. Fix it with minimal code changes.

Explain the React rendering lifecycle in a functional component with hooks. In what exact order do useState, useEffect, and useLayoutEffect fire during mount and update?

Your Next.js app fetches user-specific data in getServerSideProps. The page load time is 3.2 seconds. CDN cache hit rate is 0%. Product team asks you to make it faster without losing personalization. What do you do?

You need to build a data table with sorting, filtering, pagination, and column resizing for 100 columns and 10,000 rows. Describe your complete technical approach.

After a React upgrade from v17 to v18, your useEffect fires twice in development even though it wasn't before. Several API calls are duplicated. A junior dev asks you to 'just add a flag'. What's the real explanation and the correct fix?

A PM asks you to add Google Analytics and 3 other tracking scripts to your React app. You know this will hurt Core Web Vitals. How do you push back with data and propose a solution?

You're building a real-time collaborative document editor (like Google Docs) in React. Multiple users edit simultaneously. How do you handle state synchronization without the UI flickering or losing cursor position?

Your Next.js app fetches user data in a Server Component. The data is user-specific so caching is tricky. How do you handle per-user caching without leaking data between users?

Your team ships a React app and Lighthouse shows CLS (Cumulative Layout Shift) of 0.45. Users see content jumping on load. No one on the team has touched layout recently. How do you diagnose and fix it?

A useEffect in your component is firing infinitely. The dependency array contains an object fetched from an API. You cannot change the API response. How do you stop the infinite loop?

Your React app renders a list of 50,000 rows. Users report severe lag when scrolling. The current implementation maps over the entire array and renders each row as a component. Walk me through exactly how you'd fix this without changing the data source.

A news feed component re-fetches and re-renders every item whenever a single like count changes. Walk through how you would restructure state so only the affected item re-renders, without introducing a global state library.

How do you implement optimistic UI updates in a React app with server synchronization?

Explain the difference between reconciliation and the commit phase in React. Why can render be interrupted in Concurrent Mode but commit cannot?

Given a React component that renders 10,000 checkboxes, selecting one checkbox causes all 10,000 to re-render. Fix it without virtualizing.

A multi-step booking form (dates → guests → payment) loses all user input if they navigate back a step or refresh the page. How would you fix this without a backend round-trip on every keystroke?

Your React Native app gets a 1-star review: 'The app crashes every time I open it.' You cannot reproduce it. Logs show nothing. How do you debug this?

You're building a browser-based image editor with layers, filters, and undo/redo. Would you manage canvas rendering state inside React state, or outside it? Justify your choice.

What is a controlled component in React? Rewrite an uncontrolled input (using a ref) into a controlled one and explain the trade-off.

What is the difference between useState and useRef in React? Give an example where using the wrong one would cause a bug.

How does useEffect replace the class component lifecycle methods componentDidMount, componentDidUpdate, and componentWillUnmount?

Your React app has a race condition: user types in search, two API calls are made, the slower one returns last and overwrites the correct result. Fix it.

How would you implement a 'undo/redo' feature in a complex React form with 20 fields?

Your React app has 5 sibling components that all need access to the logged-in user's name. Would you use prop drilling, Context, or a state management library? Justify your choice.

You're using useReducer for complex form state. The reducer is being called twice in development. Is this a bug?

Explain the difference between props and state in React with a simple example of each.

What is React's Fiber architecture and why was it introduced? How does it enable concurrent features?

A designer hands you a Figma design for an animated dashboard with 20 charts updating every second from WebSocket. How do you architect the React side to prevent the entire dashboard from re-rendering on each update?

How do you handle global loading states and error handling in a React app with 50+ API calls?

Your team wants to add server-side rendering to an existing client-side React app. What are the actual technical challenges beyond 'just use Next.js'?

What is the purpose of React.Profiler component and how do you use it to find performance bottlenecks?

You have a React component that renders a chart. The chart library is 500KB. It's only shown in a modal that 10% of users ever open. How do you optimize the initial load?

Your React application shows 'Cannot update a component from inside the function body of a different component.' What causes this?

Explain Concurrent React. What problem does it solve and how does startTransition help? Give a real example where it improves UX.

What is the purpose of React.cloneElement vs React.Children.map? When would you use each?

Explain the difference between React 17 and React 18 concurrent features. What is startTransition?

Your React app uses React Query. Users complain data is always stale — they update a record and the list still shows old data. What's the correct fix and what are the tradeoffs?

Explain Module Federation in React micro-frontends. What are the main production challenges?

What are React portals and when do you need them?

You're building a micro-frontend architecture where 5 teams ship independent React apps that compose into one shell. How do you handle shared state, shared dependencies (avoid duplicate React), and routing?

How do you implement tree shaking in a React component library so importing one component doesn't bundle the entire library?

A developer says 'I never need Redux because Context API can do everything Redux does.' Is this true?

What is React Query's staleTime vs cacheTime? Explain with a scenario where misconfiguring them causes UX problems.

Design a Toast notification system in React that can be triggered from anywhere in the app, shows multiple toasts, and auto-dismisses after 3 seconds.

What is the difference between var _default_ = and named exports in React? What's the impact on tree shaking?

Explain how React context causes performance issues and how to solve them without third-party libraries.

What happens to React component state when you conditionally render it: {show && <Counter />}. User clicks 3 times. show=false, then show=true. What's the counter value?