Interview Q&A / React

1. What does the dependency array do in useEffect?

   It tells React when to re-run the effect. No array means after every render, an empty array means once after mount, and a list of values means after renders where one of them changed, compared with Object.is.

   BeginnerQuick answer1 min read
2. When does the cleanup function returned from useEffect run?

   React runs it before the effect runs again and when the component unmounts. Use it to undo what the effect set up: clear timers, remove listeners, close connections or cancel requests.

   BeginnerQuick answer1 min read
3. Why does my useEffect run twice in development?

   In Strict Mode, React 18 and later deliberately mounts, unmounts and remounts each component once in development to check that effects clean up properly. It does not happen in production.

   BeginnerQuick answer1 min read
4. What is a stale closure in a React effect, and how do you fix it?

   A closure captures the values from the render where it was created. An effect with a missing dependency keeps using old values. Fix it by listing the dependency, using the updater form of setState, or storing the latest value in a ref.

   IntermediateQuick answer1 min read
5. What is the difference between useEffect and useLayoutEffect?

   useEffect runs after the browser has painted. useLayoutEffect runs after DOM changes but before paint, and blocks painting. Use the layout version only to measure or adjust the DOM so users do not see a flicker.

   AdvancedQuick answer1 min read