30 React Interview Questions Every Senior Developer Should Know

React is the foundation of modern front-end development. For senior-level roles, it's crucial to understand not just how to use React, but how it works under the hood. In this guide, we explore 30 interview-ready questions that cover real-world scenarios, patterns, performance strategies, and architectural decisions.

---

Core Concepts

1. Explain React's component lifecycle in modern React

In modern React (with hooks), lifecycle is expressed through useEffect:

• useEffect(fn, []) = componentDidMount
• useEffect(fn, [deps]) = componentDidUpdate
• useEffect(() => { return cleanup }, [...]) = componentWillUnmount Class lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount are now handled declaratively.

---

2. How does React's reconciliation algorithm work?

React uses a diffing algorithm to compare virtual DOM trees and determine the minimum number of changes required to update the real DOM. It uses heuristics like comparing elements of the same type and keys to avoid unnecessary DOM operations.

---

3. What are React's key architectural principles?

• Declarative UI: UI is a function of state.
• Component-based: Encapsulate logic into reusable components.
• Unidirectional data flow: Data flows from parent to child.
• Virtual DOM: Efficient DOM updates.
• Hooks: Side-effects and state without classes.

---

4. Explain the virtual DOM and its benefits

The virtual DOM is an in-memory representation of the real DOM. It enables React to batch and optimize updates, reducing costly DOM mutations and improving performance. Only differences between the current and previous tree are applied to the actual DOM.

---

5. How does React handle state management?

React uses:

• useState, useReducer for local state
• Context API for global state
• Third-party libraries (e.g., Redux, Zustand, Recoil) for more complex apps State updates are asynchronous and batched for efficiency.

---

Hooks

6. Explain the rules of hooks and why they exist

Hooks:

1. Must be called at the top level (not inside loops/conditions).
2. Must only be called in React functions.

These rules ensure predictable behavior across renders and consistent hook ordering.

---

7. How would you create a custom hook for API calls?

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return data;
}

8. Compare useState vs useReducer use cases

Answer:
useState:

Simple state (primitives, simple objects)

Independent state values

Local component state

useReducer:

Complex state logic

Related state pieces

State transitions

Global state management

9. Explain useMemo vs useCallback with examples

Answer:
useMemo: Memoizes computed values

const expensiveValue = useMemo(() => compute(a, b), [a, b]);
useCallback: Memoizes functions

const stableFn = useCallback(() => doSomething(a, b), [a, b]);

10. How would you implement a complex form with hooks?

Answer:

function ComplexForm() {
  const [form, setForm] = useState(initialState);

  const handleChange = useCallback((e) => {
    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
  }, []);

  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    // Submit logic
  }, [form]);

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
    </form>
  );
}

Performance

11. How would you identify and fix performance bottlenecks?

Answer:

Use React DevTools Profiler

Identify unnecessary re-renders

Check bundle size (webpack-bundle-analyzer)

Fix with:

React.memo

useMemo/useCallback

Code splitting

Virtualization

12. Explain React.memo and when to use it

Answer:
React.memo memoizes components to prevent unnecessary re-renders when props don't change. Use when:

Component renders often with same props

Rendering is expensive

Props are primitive values
Avoid when props change frequently or are complex objects.

13. How would you implement virtualization for large lists?

Answer:
Use libraries like react-window:

import { FixedSizeList } from 'react-window';

<List 
  height={600}
  itemCount={10000}
  itemSize={35}
>
  {({ index, style }) => (
    <div style={style}>Item {index}</div>
  )}
</List>

14. What strategies would you use for code splitting?

Answer:

Route-based splitting (React.lazy + Suspense)

Component-level splitting

Library splitting (external dependencies)

Dynamic imports

Webpack chunks optimization

15. How would you optimize rendering for a complex dashboard?

Answer:

Isolate heavy components

Implement windowing/virtualization

Use React.memo selectively

Debounce rapid state updates

Offload computations to Web Workers

Use CSS transforms for animations

Advanced Patterns

16. Explain the compound components pattern

Answer:
Components that work together sharing implicit state:

<Tabs>
  <TabList>
    <Tab>First</Tab>
    <Tab>Second</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>First content</TabPanel>
    <TabPanel>Second content</TabPanel>
  </TabPanels>
</Tabs>

Uses React.Context internally for state sharing.

17. How would you implement a context-based state management system?

Answer:

const MyContext = createContext();

function Provider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {children}
    </MyContext.Provider>
  );
}

// Consumer component
function Consumer() {
  const { state } = useContext(MyContext);
  // ...
}

18. What's your approach to error boundaries in React?

Answer:
Create class components that implement getDerivedStateFromError:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <FallbackUI />;
    }
    return this.props.children;
  }
}

19. How would you implement a render props pattern?

Answer:

function DataFetcher({ render }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return render(data);
}

// Usage
<DataFetcher render={data => (
  <div>{data ? data : 'Loading...'}</div>
)} />

20. Explain higher-order components in modern React

Answer:
HOCs are functions that take a component and return an enhanced component. Still useful for cross-cutting concerns:

function withAuth(WrappedComponent) {
  return function(props) {
    const [user] = useAuth();
    if (!user) return <Login />;
    return <WrappedComponent {...props} user={user} />;
  };
}

Testing

21. How would you test complex custom hooks?

Answer:
Use @testing-library/react-hooks:

test('should use custom hook', () => {
  const { result } = renderHook(() => useCustomHook());

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

22. What's your strategy for testing React components?

Answer:

Unit tests: Jest + React Testing Library

Integration tests: Component interactions

Snapshot tests for critical UIs

Mock external dependencies

Test user flows, not implementation

23. How would you mock context in tests?

Answer:

const mockContextValue = { user: { name: 'Test' } };

render(
  <MyContext.Provider value={mockContextValue}>
    <ComponentToTest />
  </MyContext.Provider>
);

24. Explain your approach to integration testing

Answer:

Test complete user flows

Render multiple interacting components

Mock only external services

Use userEvent for realistic interactions

Verify state changes and side effects

25. How would you test performance-critical components?

Answer:

Benchmark with React.Profiler

Integration tests with timing requirements

Mock heavy dependencies

Verify memoization works

Check re-render counts with Jest

Architecture

26. How would you structure a large React application?

Answer:
Feature-based structure:

/src
  /features
    /user
      /components
      /hooks
      /services
  /shared
    /components
    /utils
  /app
    /routing
    /store

27. Explain your approach to feature flags in React

Answer:

Central configuration (context/API)

Component wrapper:

<FeatureFlag name="new-ui">
  <NewComponent />
</FeatureFlag>

Server-side evaluation for critical features

Phased rollouts with analytics

28. How would you implement micro-frontends with React?

Answer:

Module Federation (Webpack 5)

Iframe integration

Web Components wrapper

Shared dependency management

Centralized routing layer

Design system consistency

29. What's your strategy for internationalization?

Answer:

Use react-i18next or similar

JSON translation files

Dynamic loading of language packs

Context-based language switching

RTL support

Date/number formatting

30. How would you migrate a class component codebase to hooks?

Answer:

Identify simple components first

Create incremental adoption strategy

Use codemods where possible

Update tests accordingly

Train team on hooks

Monitor performance during transition

Closing Remarks:
Mastering these React concepts demonstrates senior-level expertise in building modern web applications. Remember to support your answers with real-world examples from your experience.

Pro Tip: For behavioral questions, use the STAR method (Situation, Task, Action, Result) to structure your responses about past React projects.