React Hooks Interview Questions: Master the Most Asked Concepts in 2024

React hooks fundamentally changed how we write React components, and they've become a cornerstone of modern React interviews. As someone who's conducted hundreds of technical interviews, I can tell you that hooks questions reveal a developer's understanding of React's mental model, not just syntax memorization.

The tricky part about hooks interviews isn't just knowing what each hook does—it's understanding why they exist and how they solve real problems. Let me walk you through the most important concepts that interviewers actually care about.

Essential useState and useEffect Interview Questions

These two hooks form the foundation of most React applications, so expect deep dives here.

The classic useState gotcha:
Interviewers love asking about state updates being asynchronous. Here's what trips up most candidates:

function Counter() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    console.log(count); // What gets logged?
  };
  
  return <button onClick={handleClick}>{count}</button>;
}

The answer: 0 gets logged, and count only increments by 1. This reveals whether you understand that state updates are batched and asynchronous. The correct approach uses the functional update pattern: setCount(prev => prev + 1).

useEffect dependency arrays:
Every senior developer I know has been asked to explain this code:

useEffect(() => {
  fetchUserData(userId);
}, []); // Empty dependency array - is this correct?

This is wrong and creates a stale closure. The effect captures the initial userId value and never updates. The correct version includes userId in the dependencies or uses a ref for more complex scenarios.

Interviewers also love asking about the difference between useEffect and useLayoutEffect. The key insight: useLayoutEffect runs synchronously after all DOM mutations but before the browser paints, making it perfect for measuring DOM elements or preventing visual flickers.

Advanced Custom Hooks Interview Scenarios

Custom hooks questions separate junior developers from senior ones. They test your ability to extract reusable logic and understand hooks composition.

The "build a custom hook" challenge:
A common interview question asks you to create a useLocalStorage hook. Here's what a solid implementation looks like:

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error('Error reading from localStorage:', error);
      return initialValue;
    }
  });
  
  const setValue = useCallback((value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error('Error writing to localStorage:', error);
    }
  }, [key]);
  
  return [storedValue, setValue];
}

This implementation demonstrates several advanced concepts: lazy initial state, error handling, useCallback for performance, and a clean API that mirrors useState.

Custom hooks composition:
Interviewers often ask how you'd combine multiple custom hooks. For example, building a useApi hook that combines useLocalStorage for caching with useEffect for fetching. The key insight is that custom hooks should be composable and single-responsibility.

React Hooks Performance and Optimization Questions

Performance questions reveal whether you understand how React's reconciliation works under the hood.

useMemo vs useCallback confusion:
Most candidates can recite that useMemo memoizes values and useCallback memoizes functions, but they miss the crucial detail: when to actually use them.

useMemo is worthwhile when:

• The computation is expensive


• The result is passed to optimized child components


• The dependencies change infrequently

useCallback is essential when:

• Passing callbacks to optimized components


• The callback is a dependency of other hooks


• Breaking infinite re-render cycles

A good interviewer will present a scenario where someone overused these hooks and ask you to explain why it might actually hurt performance (hint: the memoization overhead can exceed the benefits).

The useRef performance trick:
Here's a question that stumps many candidates: "How do you store a mutable value that doesn't cause re-renders?"

The answer is useRef, but the follow-up reveals deeper understanding: "When would you use this pattern?" Common use cases include storing timer IDs, previous values for comparison, or mutable objects that shouldn't trigger renders.

Context API and useContext Best Practices

Context questions test your understanding of React's data flow and when to break the props drilling pattern.

The context performance trap:
Interviewers love showing code where context value is recreated on every render:

function App() {
  const [user, setUser] = useState(null);
  
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Dashboard />
    </UserContext.Provider>
  );
}

This causes all context consumers to re-render unnecessarily. The fix involves memoizing the context value or splitting contexts for different concerns.

Context vs component composition:
A nuanced question asks when you'd choose context over component composition. The general rule: if you're passing props through 2-3 levels, composition is often cleaner. Context shines when you have truly global state or when multiple distant components need the same data.

Custom context hooks pattern:
Senior developers always wrap context consumption in custom hooks:

function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within UserProvider');
  }
  return context;
}

This provides better error messages and encapsulates the context implementation.

Common React Hooks Pitfalls and Edge Cases

The most revealing interview questions focus on edge cases and common mistakes.

The infinite loop trap:
Show me a developer who hasn't accidentally created an infinite re-render loop, and I'll show you someone who hasn't written much React. Common causes include:

• Missing dependencies in useEffect


• Creating objects/arrays inline in dependency arrays


• Calling state setters unconditionally in render

Rules of hooks violations:
While ESLint catches most issues, interviewers still ask about the rules of hooks to test fundamental understanding:

• Only call hooks at the top level (no loops, conditions, or nested functions)


• Only call hooks from React functions

The reason behind these rules reveals React's internal hook indexing system—each hook call gets a consistent index that React uses to preserve state between renders.

Stale closure gotchas:
This is where many interviews get challenging. Consider a component that sets up an interval:

useEffect(() => {
  const interval = setInterval(() => {
    setCount(count + 1); // Stale closure!
  }, 1000);
  return () => clearInterval(interval);
}, []); // Empty deps cause stale closure

The solutions include using the functional update form, useRef, or including count in dependencies with proper cleanup.

Mastering React hooks isn't just about memorizing APIs—it's about understanding the mental model that makes modern React tick. The best candidates can explain not just how hooks work, but why they were designed this way and what problems they solve.

Practice this on Goliath Prep — AI-graded mock interviews with instant feedback. Try it free at app.goliathprep.com