Interview Q&A / React

1. How is useDeferredValue different from debouncing?

   useDeferredValue gives you a lagging copy of a value that React updates when it is idle, with no fixed delay and with interruptible rendering. Debouncing waits a set time before updating and cannot be interrupted once the work starts.

   AdvancedQuick answer1 min read
2. What does useTransition do, and when would you use it?

   useTransition lets you mark a state update as non-urgent. React keeps the UI responsive for urgent updates like typing and can interrupt the slow update. It also gives an isPending flag to show a loading hint.

   AdvancedQuick answer1 min read
3. 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
4. Why do all components using a context re-render when its value changes, and how do you limit that?

   React compares the Provider's value with Object.is. Passing a new object literal each render makes every consumer re-render. Memoise the value, split contexts by concern, or keep state close to where it is used.

   AdvancedQuick answer1 min read