Intermediate React Questions

Definition

Questions designed to test your understanding of React's lifecycle, hooks, and performance characteristics.

Explain Like I'm New

These questions separate the developers who just 'use' React from the developers who actually understand *how* React works under the hood.

Real World Example

Mid-level interviews will focus heavily on `useEffect` dependencies, React Context, and preventing unnecessary re-renders.

Common Use Cases

•Mid-level Developer Interviews

Interactive Example

// Typical intermediate question: "Fix the infinite loop in this useEffect"
/*
function BadComponent() {
  const [user, setUser] = useState({ name: 'Alice' });
  
  useEffect(() => {
    // fetch data...
    setUser({ name: 'Alice' }); 
  }, [user]); // INFINITE LOOP! The object reference changes every render!
}
*/

Interview Questions

basic

What is Prop Drilling and how do you avoid it?

intermediate

Explain the `useEffect` hook and its dependency array.

advanced

What is the difference between `useMemo` and `useCallback`?

Flash Cards

Question

Explain the useEffect dependency array.

Click to reveal answer

Answer

The dependency array tells React when to re-run the effect. If omitted, the effect runs after every single render. If empty `[]`, it runs only once on mount. If it has variables `[data]`, it runs on mount and whenever `data` changes.

Question

useMemo vs useCallback?

Click to reveal answer

Answer

`useMemo` caches the RESULT of a calculation (like a sorted array). `useCallback` caches the FUNCTION ITSELF so that its reference doesn't change on every render, which is useful when passing functions to `React.memo` wrapped child components.