Top React Hooks Interview Questions and Answers (2025)

React Hooks changed everything when they landed in React 16.8. Today, virtually every React interview includes hooks questions — from basic useState to advanced patterns like custom hooks and performance optimization.

This guide covers the most frequently asked React hooks interview questions with clear, practical answers.

What Are React Hooks?

Hooks are functions that let you "hook into" React state and lifecycle features from function components. Before hooks, you needed class components to manage state or use lifecycle methods.

Why hooks matter in interviews: They show whether a candidate understands React's mental model — not just the syntax.

useState

Q: What does useState return and how do you use it?

useState returns an array with two elements: the current state value and a setter function.

javascript
const [count, setCount] = useState(0);

The initial value (0 here) is only used on the first render. After that, React tracks the state internally.

Q: Why should you never mutate state directly?

React uses reference equality to detect changes. If you mutate an object directly, the reference stays the same and React will not re-render.

javascript
// Wrong — mutating directly
state.items.push(newItem);
setState(state);

// Correct — new reference
setState({ ...state, items: [...state.items, newItem] });

Q: What is the functional update form of useState?

When new state depends on old state, use the functional form to avoid stale closures:

javascript
// Risky — stale closure possible
setCount(count + 1);

// Safe — always gets latest state
setCount(prev => prev + 1);

This matters especially inside setTimeout, event listeners, or async functions.

useEffect

Q: When does useEffect run?

useEffect runs after the component renders. The dependency array controls when it re-runs:

javascript
useEffect(() => { /* runs after every render */ });
useEffect(() => { /* runs once on mount */ }, []);
useEffect(() => { /* runs when dep changes */ }, [dep]);

Q: What is the cleanup function in useEffect?

Return a function from useEffect to clean up subscriptions, timers, or event listeners:

javascript
useEffect(() => {
  const timer = setInterval(() => tick(), 1000);
  return () => clearInterval(timer); // cleanup on unmount
}, []);

Without cleanup, you risk memory leaks and bugs when the component unmounts.

Q: What is the difference between useEffect and useLayoutEffect?

useEffect runs after the browser paints — non-blocking, good for data fetching
useLayoutEffect runs before the browser paints — use for DOM measurements or avoiding visual flicker

In most cases, useEffect is what you want.

Q: How do you fetch data with useEffect correctly?

javascript
useEffect(() => {
  let cancelled = false;

  async function fetchData() {
    const res = await fetch(`/api/user/${id}`);
    const data = await res.json();
    if (!cancelled) setUser(data);
  }

  fetchData();
  return () => { cancelled = true; };
}, [id]);

The cancelled flag prevents setting state on an unmounted component — a common source of React warnings.

useCallback and useMemo

Q: What is the difference between useCallback and useMemo?

useCallback memoizes a function
useMemo memoizes a value (the result of a computation)

javascript
// useCallback — returns the same function reference
const handleClick = useCallback(() => {
  doSomething(dep);
}, [dep]);

// useMemo — returns the computed value
const expensiveValue = useMemo(() => {
  return heavyComputation(data);
}, [data]);

Q: When should you actually use useCallback?

Only when passing callbacks to child components wrapped in React.memo, or as dependencies to other hooks. Do not add it everywhere — it has its own overhead.

Common mistake: Wrapping every function in useCallback "just in case." Profile first, optimize second.

Q: What is React.memo and how does it relate to useCallback?

React.memo prevents a child component from re-rendering if its props have not changed. But if you pass a new function reference on every render (without useCallback), React.memo will not help — functions are recreated on every render.

javascript
const Child = React.memo(({ onClick }) => (
  <button onClick={onClick}>Click</button>
));

// Parent
const handleClick = useCallback(() => doThing(), []); // stable reference
return <Child onClick={handleClick} />;

useRef

Q: What are the two main uses of useRef?

1. Accessing DOM elements directly:

javascript
const inputRef = useRef(null);

function focusInput() {
  inputRef.current.focus();
}

return <input ref={inputRef} />;

2. Storing mutable values that do not trigger re-renders:

javascript
const renderCount = useRef(0);
renderCount.current += 1; // will not cause re-render

Q: What is the difference between useRef and useState?

	useState	useRef
Triggers re-render	Yes	No
Persists across renders	Yes	Yes
Use case	UI state	DOM refs, timers, previous values

useContext

Q: What problem does useContext solve?

It eliminates prop drilling — passing props through many component layers just to reach a deeply nested child.

javascript
const ThemeContext = createContext('light');

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

function Button() {
  const theme = useContext(ThemeContext); // no props needed
  return <button className={theme}>Click</button>;
}

Q: Does useContext replace Redux or Zustand?

For simple global state (theme, locale, auth), yes. For complex state with frequent updates and many subscribers, a dedicated state manager is usually better — useContext re-renders all consumers whenever the value changes.

useReducer

Q: When should you use useReducer instead of useState?

Use useReducer when:

State has multiple sub-values that update together
Next state depends on previous state in complex ways
You want Redux-like state logic without a library

javascript
function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'reset':     return { count: 0 };
    default: throw new Error('Unknown action');
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

Custom Hooks

Q: What is a custom hook and why would you create one?

A custom hook is a function that starts with use and calls other hooks. It lets you extract and reuse stateful logic across components.

javascript
function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handler = () =>
      setSize({ width: window.innerWidth, height: window.innerHeight });
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  return size;
}

// Usage in any component
const { width, height } = useWindowSize();

Q: What are the rules of hooks?

Only call hooks at the top level — not inside loops, conditions, or nested functions
Only call hooks from React function components or other custom hooks

These rules exist because React relies on call order to associate hooks with component instances.

Hooks vs Class Components

Q: Can you rewrite a class component with hooks?

javascript
// Class component
class Timer extends React.Component {
  state = { seconds: 0 };

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(s => ({ seconds: s.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>{this.state.seconds}s</div>;
  }
}

// Hooks equivalent
function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>{seconds}s</div>;
}

Practice React Hooks on Froquiz

Reading about hooks is a start — actually testing yourself is what cements the knowledge. Try our React quiz on Froquiz with beginner, intermediate, and advanced level questions covering all major hooks and patterns.

Summary

useState — local component state; use functional updates for derived state
useEffect — side effects; always clean up; include all dependencies
useCallback — memoize functions for stable references
useMemo — memoize expensive computations
useRef — DOM access or mutable values without re-renders
useContext — consume context without prop drilling
useReducer — complex state logic with actions
Custom hooks — extract and reuse stateful logic

Know these cold and you will handle any React hooks interview question with confidence.