React Developer Interview Questions India 2026: Hooks, State Management, and Performance

useEffect deep dive: 'What is the difference between useEffect with no dependency array, an empty dependency array, and a dependency array with values?' (no array: runs after EVERY render; empty array []: runs ONLY after the first render, equivalent to componentDidMount; [a, b]: runs after first render and then after any render where a or b have changed). 'What is a cleanup function in useEffect and when do you use it?' (the function returned from useEffect; runs before the effect runs again and when the component unmounts; use for: clearing setTimeout/setInterval, unsubscribing from event listeners, cancelling fetch requests with AbortController, cleaning up WebSocket connections). 'What is a stale closure in a React hook?' (a closure captures the value of a state variable at the time it was created; if the state updates but the closure is not in the dependency array, it reads the old value; example: setInterval in useEffect with an empty dependency array reads the initial count value forever, even as count updates; fix: add count to the dependency array, or use the functional form of setState: setCount(prev => prev + 1) which always uses the latest value).

useCallback vs useMemo: 'When do you use useCallback?' (to memoise a function reference; prevents a child component wrapped in React.memo from re-rendering because its callback prop is a new function instance on every parent render; use when the child is expensive to render and the callback logic does not need to change frequently). 'When do you use useMemo?' (to memoise a computed value; prevents expensive recalculations on every render; example: filtering a list of 10,000 items should be wrapped in useMemo with the list and filter criteria as dependencies). useRef: 'What are the two main uses of useRef?' (1: access a DOM element directly (ref.current is the DOM node); 2: persist a mutable value across renders without triggering a re-render (unlike useState); example: store a setInterval ID so you can clear it on unmount).

Context API questions: 'What problem does Context solve?' (prop drilling: passing props through many layers of components that do not use the prop themselves, just to pass it further down; Context lets you provide a value at any level and consume it at any depth without explicit prop passing). 'What is the performance limitation of Context?' (every component that calls useContext re-renders when ANY value in the context object changes, even if that component only reads one field; this makes Context unsuitable for frequently-updating values (user input, animation state, rapidly-changing data); solution: split context by concern (AuthContext, ThemeContext, SettingsContext) or use a library like Zustand or Jotai which supports selective subscription).

Redux questions: 'Walk me through how Redux works.' (components dispatch actions; reducers (pure functions: (state, action) => newState) produce a new state from the previous state and the action; the store holds the current state; components subscribe via useSelector; the UI re-renders when the selected slice of state changes). 'What is Redux Toolkit and why was it created?' (Redux Toolkit (RTK) is the official, opinionated way to write Redux code; it eliminates boilerplate: createSlice generates action creators and reducers in one call; createAsyncThunk handles async actions; RTK Query handles data fetching and caching). Zustand: 'Why might you choose Zustand over Redux?' (Zustand requires almost no boilerplate: one create() call defines the store including state and actions; selective subscriptions via selector function prevent unnecessary re-renders; no Provider needed at the top level; better for small-to-medium apps where Redux's structured patterns are overkill).

Performance interview questions: 'What causes a React component to re-render?' (three triggers: (1) state change via useState or useReducer; (2) parent re-renders and passes new prop values (new object or array literals, new function references); (3) context value changes). 'What is React.memo and how does it help?' (wraps a functional component; before re-rendering, React shallowly compares the new and previous props; if they are equal, it skips the render; only helps when props are stable references; combine with useCallback for function props and useMemo for object/array props to ensure stable references).

'What is the React Profiler and how do you use it?' (React DevTools includes a Profiler tab; record a session while interacting with the app; the flame chart shows each component's render time and the reason it rendered; a Ranked chart sorts components by render time; use it to identify which component is rendering unnecessarily and validate that adding React.memo or useCallback actually reduces renders). 'What is lazy loading in React and when do you use it?' (React.lazy(() => import('./Component')) defers loading a component until it is first rendered; combined with Suspense for a loading fallback; use at route boundaries (each page component is lazy-loaded) to split the bundle and reduce initial load time; also useful for large third-party libraries: only load a chart library when the user navigates to the chart page). 'What is code splitting and how does it differ from lazy loading?' (code splitting is the general concept: the bundler (Webpack/Vite) creates multiple smaller chunks instead of one large bundle; lazy loading is the runtime trigger: chunks are loaded on demand when the component is first needed; React.lazy is the API that enables React-level lazy loading).

Advanced questions at companies like Flipkart, Swiggy, Razorpay, CRED: 'What is reconciliation in React?' (the algorithm React uses to diff the previous and new virtual DOM; React assumes that: (1) two elements of different types produce different trees (React unmounts and remounts the whole subtree when the root element type changes); (2) elements of the same type with the same key are the same (React updates the attributes and recursively reconciles children); (3) keys tell React which child elements are stable across renders (without keys, reordering a list causes React to re-render every item instead of just moving DOM nodes)). 'What are React Server Components (RSC)?' (components that render exclusively on the server and send HTML to the client; they have zero client-side JavaScript overhead; they can directly access databases, file systems, and APIs; they cannot use state, effects, or browser APIs; appropriate for static or server-data-dependent components (blog posts, product listings, user profile headers); in Next.js 13+ App Router, all components are Server Components by default unless you add 'use client').

'What is the difference between controlled and uncontrolled components?' (controlled: the input's value is bound to React state via value and onChange; the React state is the single source of truth; lets you validate or transform input before it is stored; uncontrolled: the input's value is managed by the DOM; you read it via a ref when needed; simpler for large forms where performance is a concern (no re-render on every keystroke) but less flexible for validation). 'What is prop drilling and what are the solutions?' (prop drilling: passing props through intermediate components that do not use them, just to deliver them to a deeply nested child; solutions: Context API (for infrequently-updated data), Zustand or Jotai (for frequently-updated shared state), component composition (lifting the component that needs the prop and rendering it at the top level as a prop.children or render prop)).