Interview Q&A / React

1. What is the difference between useMemo and useCallback, and when should you not use them?

   useMemo caches the result of a calculation, and useCallback caches a function itself, both until their dependencies change. Use them for expensive calculations or to keep values stable for memoized children or effect dependencies; skip them for cheap work, where they only add complexity.

   IntermediateIn-depth3 min read
2. What causes a React component to re-render?

   A component re-renders when its own state changes, when its parent re-renders, or when a context it reads changes. Changing a prop value does not itself trigger it; the parent re-rendering does. Plain variables and refs never cause a render.

   BeginnerQuick answer1 min read
3. What is code splitting and how does it make a React app load faster?

   Code splitting breaks the JavaScript bundle into smaller chunks that load on demand, for example per route. Users download only what the first screen needs, so the page becomes interactive sooner.

   BeginnerQuick answer1 min read
4. What does React.memo do, and when does it fail to help?

   React.memo wraps a component so React skips re-rendering it when its props are shallowly equal to the last render. It fails when you pass new object, array or function references on every parent render.

   IntermediateQuick answer1 min read
5. What is lazy initialisation in useState, and when should you use it?

   Pass a function to useState, as in useState(() => compute()). React runs it only on the first render. Without the function form, the expensive call runs on every render, even though its result is ignored after the first.

   IntermediateQuick answer1 min read
6. What is state colocation, and how can it make a slow component fast without memo?

   Keep state in the lowest component that needs it. If only a small input uses a value, move that state into the input's own component, so typing no longer re-renders the heavy sibling components in the parent.

   IntermediateQuick answer1 min read
7. When is useMemo actually worth using?

   Use it when a calculation is measurably slow, or when you need a stable object or array reference to pass to a memoised child or a hook dependency. Wrapping cheap calculations adds overhead and noise.

   IntermediateQuick answer1 min read
8. 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
9. 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