Top 50 React Interview Questions and Answers in 2026

Technical interviews for React positions have evolved significantly in 2026. Employers now expect not just knowledge of hooks and state management, but a deep understanding of React's rendering model, concurrent features, server components, and performance optimization.

Below we cover 50 essential React interview questions, divided by category. Each question includes a concise answer and code examples where relevant.

---

Core React Concepts (Questions 1-10)

1. What is React and how does it differ from other frameworks?

React is a declarative, component-based JavaScript library for building user interfaces. Unlike full frameworks (Angular, Vue), React focuses primarily on the view layer and leaves routing, state management, and data fetching to external libraries or built-in solutions like Next.js.

Key differences:

- Virtual DOM — React uses a virtual representation of the UI to batch updates efficiently

- Unidirectional data flow — data flows down via props, events flow up

- JSX — JavaScript syntax extension that combines markup with logic

- Library, not a framework — you choose your tooling

2. Explain the Virtual DOM and its reconciliation process

The Virtual DOM is a lightweight JavaScript object representation of the real DOM. When state changes, React:

1. Creates a new virtual DOM tree

2. Diffs it against the previous tree (reconciliation)

3. Calculates the minimal set of DOM mutations

4. Batches and applies them

This process is called reconciliation and is driven by the key prop for lists, element type comparison, and the Fiber architecture introduced in React 16.

3. What are React Hooks? List the most common ones.

Hooks are functions that let you use state and lifecycle features in functional components. Introduced in React 16.8, they replaced class components as the standard.

Core hooks:

- useState — local component state

- useEffect — side effects (data fetching, subscriptions, DOM manipulation)

- useContext — consume context

- useRef — mutable references that persist across renders

- useMemo — memoize expensive computations

- useCallback — memoize function references

- useReducer — complex state logic with reducers

- useTransition (React 18+) — mark state updates as non-urgent

- useOptimistic (React 19+) — optimistic UI updates

- useActionState (React 19+) — manage form actions with pending state

4. What is the difference between `useEffect` and `useLayoutEffect`?

- useEffect runs after the browser paints. It's asynchronous and non-blocking. Use for data fetching, subscriptions, analytics.

- useLayoutEffect runs synchronously after DOM mutations but before the browser paints. Use for reading layout and synchronously re-rendering (measuring DOM elements, animations).

Rule of thumb: prefer useEffect unless you see a visual flicker (flash of unstyled content).

5. Explain the Rules of Hooks

1. Only call Hooks at the top level — don't call them inside loops, conditions, or nested functions

2. Only call Hooks from React functions — function components or custom hooks, not regular JavaScript functions

These rules ensure that hooks are called in the same order on every render, which is how React preserves state between useState and useEffect calls.

6. What is the Context API and when should you use it?

Context provides a way to pass data through the component tree without manually passing props at every level (prop drilling).

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>Hello</div>;
}

When to use: global state (theme, locale, auth user), rarely-changed data.

When NOT to use: frequently-updating data (use a state management library like Zustand, Jotai, or Redux instead).

7. Explain the `key` prop — why is it important?

The key prop helps React identify which items in a list have changed, been added, or removed. Without stable keys, React may unnecessarily re-render all items or introduce bugs with component state.

// ❌ Bad — using index as key
{items.map((item, index) => <Item key={index} {...item} />)}

// ✅ Good — using a stable unique ID
{items.map((item) => <Item key={item.id} {...item} />)}

Never use Math.random() or array indexes for keys in dynamic lists, as it defeats React's reconciliation.

8. What is the difference between controlled and uncontrolled components?

- Controlled: React state drives the input value. The component has full control.

```jsx

const [value, setValue] = useState('');

return setValue(e.target.value)} />;

```

- Uncontrolled: the DOM manages its own state. You use a ref to access the value when needed.

```jsx

const ref = useRef(null);

return ; // access via ref.current.value

```

Rule of thumb: use controlled components for most cases (validation, instant feedback). Use uncontrolled for simple forms or integrating with non-React code.

9. What is the `StrictMode` component?

StrictMode is a development-only wrapper that:

- Identifies components with unsafe lifecycle methods

- Detects unexpected side effects by double-invoking render functions

- Warns about legacy string ref API usage

- Detects deprecated findDOMNode usage

It helps catch bugs early by intentionally running certain functions twice in development.

10. Explain the difference between `useMemo` and `useCallback`

- useMemo memoizes a value: const sorted = useMemo(() => items.sort(), [items])

- useCallback memoizes a function: const handleClick = useCallback(() => doSomething(id), [id])

Both are performance optimizations. Apply them only when you've identified a performance bottleneck — premature optimization adds complexity without benefit.

---

State Management (Questions 11-20)

11. What is lifting state up?

When multiple components need access to the same piece of state, move that state to the nearest common ancestor and pass it down via props.

12. `useReducer` vs `useState` — when to use which?

- useState — simple independent values (strings, booleans, numbers)

- useReducer — complex state logic with multiple sub-values, or when the next state depends on the previous one

const [state, dispatch] = useReducer(reducer, initialState);

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

13. What are popular React state management libraries in 2026?

1. Zustand — minimal, hook-based, no boilerplate (most popular)

2. Jotai — atomic state management, inspired by Recoil

3. TanStack Query — server state (data fetching, caching)

4. Redux Toolkit — still widely used in enterprise

5. Valtio — proxy-based, mutable API

14. What is the difference between state and props?

15. What are pure components and `React.memo`?

React.memo is a higher-order component that memoizes the rendered output. It prevents re-rendering when props haven't changed (shallow comparison).

const ExpensiveComponent = React.memo(function Expensive({ data }) {
  return <div>{data.map(/* ... */)}</div>;
});

---

Performance Optimization (Questions 21-25)

21. What causes unnecessary re-renders in React?

Common causes:

- Parent re-render (all children re-render by default)

- Inline objects/arrays/functions passed as props (new reference each render)

- State at too high a level

- Missing key props or unstable keys

22. What is React.memo and when should you use it?

React.memo prevents re-renders when props haven't changed. Use it for:

- Components that render often but receive the same props

- Expensive rendering trees

- Leaf components in performance-critical views

23. Explain code splitting in React

Code splitting lets you split your bundle into smaller chunks loaded on demand:

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

24. What is the `useDeferredValue` hook?

useDeferredValue lets you defer re-rendering a non-urgent part of the UI:

const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const results = useMemo(() => search(deferredQuery), [deferredQuery]);

The deferred value updates "lag behind" the urgent update, keeping the UI responsive.

25. How do React Server Components (RSC) improve performance?

RSC (Next.js App Router) render components on the server, sending only the HTML to the client. Benefits:

- Zero JavaScript for server components

- Direct database access without API endpoints

- Smaller client bundles

- Automatic code splitting

- Streaming and Suspense for progressive rendering

---

Advanced Topics (Questions 26-40)

26. What is Suspense in React?

Suspense lets components "wait" for something before rendering:

<Suspense fallback={<Spinner />}>
  <AsyncComponent />
</Suspense>

In React 18+, Suspense works with data fetching, code splitting, and streaming SSR.

27. Explain concurrent rendering (React 18+)

Concurrent mode is a new behind-the-scenes rendering mechanism that lets React:

- Interrupt a render in progress

- Prioritize urgent updates (user input) over less urgent ones (data loading)

- Keep the old UI visible while preparing the new one

Enabled by createRoot and features like useTransition and useDeferredValue.

28. What are Custom Hooks?

Custom hooks are JavaScript functions that reuse stateful logic:

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return width;
}

29. What is the render props pattern?

A render prop is a function prop that a component uses to know what to render:

<Mouse render={(position) => <Cat position={position} />} />

30. What is the difference between `useEffect` cleanup and `componentWillUnmount`?

They're conceptually the same — both run when the component unmounts. useEffect cleanup also runs before the effect re-runs (if deps changed), which componentWillUnmount did not.

---

Testing (Questions 41-45)

41. What testing libraries are commonly used with React?

- Vitest — fast, Vite-native test runner (replacing Jest)

- React Testing Library — tests from a user perspective

- Playwright — end-to-end testing

42. How do you test a custom hook?

Use renderHook from @testing-library/react:

import { renderHook, act } from '@testing-library/react';

test('useCounter', () => {
  const { result } = renderHook(() => useCounter());
  act(() => result.current.increment());
  expect(result.current.count).toBe(1);
});

---

Real-World Scenarios (Questions 46-50)

46. How would you handle authentication in a React app?

Modern approach (with Next.js App Router):

1. JWT or session-based auth

2. Middleware for route protection

3. Server-side session check for RSC

4. useContext or Zustand for client-side auth state

5. Refresh token rotation

47. How do you optimize a React app with thousands of list items?

- Window virtualization (react-window, @tanstack/virtual)

- React.memo on list items

- Stable key props

- Debounce search/filter inputs

- Pagination or infinite scroll

- Server-side filtering

48. How do you handle errors in React?

- Error Boundaries (class components with componentDidCatch)

- Suspense boundary for async errors

- Try/catch in event handlers

- Global error handler via window.onerror

49. How do internationalization (i18n) work in React?

Common approach:

1. react-i18next or next-intl

2. Store translations as JSON

3. Use t() function in components

4. Lazy-load translations

5. Handle RTL layouts

50. What is the future of React? (2026 perspective)

React continues to evolve toward:

- Server Components as the default

- Actions — built-in form handling (useActionState, Server Actions)

- React Compiler — automatic memoization (no more useMemo/useCallback manual optimization)

- Offscreen — keep components mounted but invisible

- Tight integration with frameworks (Next.js, Remix)

---

How to Practice These Questions

The best way to master React interviews is deliberate practice. Use [AI Interview Trainer](https://t.me/developing_interview_trainer_bot) to:

- Practice these exact questions with AI-generated follow-ups

- Get scored on your answers with detailed feedback

- Track your progress across topics

- Practice in Technical or Behavioral mode

- Record voice answers for a realistic interview experience

[Start free practice →](https://t.me/developing_interview_trainer_bot)