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

React hooks interview questions:

1. 'What is the difference between useState and useReducer?' useState: for simple, independent state values (a boolean toggle, a counter, a string input). useReducer: for complex state logic with multiple related sub-values, or when the next state depends on the previous state in a complex way. useReducer is also preferred when the update logic is too complex for a single setState call or when multiple state transitions share logic. useReducer with context is a lightweight alternative to Redux for medium-complexity state.

2. 'What does useEffect do? When does it run?' useEffect runs after every render by default. Dependency array behaviour: no array → runs after every render; empty array [] → runs once after the first render (componentDidMount equivalent); [dep1, dep2] → runs after renders where dep1 or dep2 changed. Cleanup: the function returned from useEffect runs before the next effect or on unmount. Use for: data fetching, subscriptions, manually synchronising with external systems.

3. 'What is useCallback and when should you use it?' useCallback returns a memoised function reference. Without it, a new function is created on every render. Use when: passing a callback to a child component wrapped in React.memo (to prevent re-renders caused by the function reference changing); when the function is a dependency of another hook (useEffect, useMemo). Do NOT use it everywhere: the memoisation itself has a cost; only use it when re-renders are a verified problem.

4. 'What is useMemo and when should you use it?' useMemo memoises the result of an expensive computation, recalculating only when its dependencies change. Use when: the computation is genuinely expensive (sorting 10,000 items, complex derived data); the result is passed to a React.memo child. Do NOT use it for simple computations; the overhead of dependency comparison usually exceeds the cost.

5. 'What is the useRef hook used for?' Two use cases: (1) Accessing a DOM element directly (assigning to the ref prop of a JSX element); (2) Storing a mutable value that does not trigger a re-render when changed (storing a previous value, storing a timer ID for clearTimeout, storing whether a component is mounted).

React performance interview questions:

1. 'What is React.memo and when should you use it?' React.memo wraps a component and prevents re-renders if its props have not changed (shallow comparison). Use when: a component is expensive to render AND its parent re-renders frequently while the child's props remain constant. Common use case: items in a list where the parent frequently changes state that does not affect the list items.

2. 'What is code splitting and how is it done in React?' Code splitting defers loading of non-critical code until it is needed, reducing initial bundle size. Implementation: React.lazy() + Suspense. const LazyComponent = React.lazy(() => import('./LazyComponent')); Then wrap in: <Suspense fallback={<Spinner />}><LazyComponent /></Suspense>. Next.js does code splitting automatically per route (each page is a separate chunk); you only need explicit React.lazy for components that are conditionally rendered within a page.

3. 'What is Context and when should you use it?' Context provides a way to pass data through the component tree without manually passing props at every level. Use for: authentication state, theme, language/locale. Do NOT use for all global state: every component that consumes the context re-renders when the context value changes. For high-frequency updates (animation, real-time data), use a dedicated state library or split the context.

State management interview questions:

4. 'What is the difference between Redux and Zustand?' Redux: predictable, strict single-direction data flow; well-established patterns; extensive DevTools; boilerplate-heavy (action types, reducers, selectors). Redux Toolkit reduces boilerplate. Zustand: minimal boilerplate (a store is one function call); no reducers needed; smaller bundle size; less ceremony. Preferred by many newer Indian startups for its simplicity. Both are valid at scale; the choice depends on team familiarity and codebase complexity.

5. 'What is React Query and why do Indian companies use it?' React Query (TanStack Query) manages server state: caching, background refetching, loading/error states, pagination, and invalidation. It replaces the common pattern of useEffect + useState for data fetching. Benefits: automatic background refetching on window focus, stale-while-revalidate caching, deduplication of identical requests, and optimistic updates. Most Indian product companies using Next.js adopt React Query or SWR for data fetching.