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 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
3. 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
4. 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
5. 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