Question 1

What are the Rules of Hooks?

Accepted Answer

Only call hooks at the top level of React functions; only call from React functions or custom hooks. No hooks in loops/conditions. Ensures stable hook order between renders. ESLint plugin enforces this.

Question 2

What is a custom hook?

Accepted Answer

A function starting with use that composes built-in hooks to reuse stateful logic. Share behavior, not UI. Return stable APIs. Don't hide surprising side effects.

Question 3

useRef vs useState — when each?

Accepted Answer

useRef holds mutable values without re-render; useState triggers re-render on update. Refs for DOM nodes, timers IDs, previous values. Don't use refs to 'avoid' renders when UI must update.

Question 4

What does useId solve?

Accepted Answer

Stable unique IDs for a11y attributes that match between server and client. Prefer over Math.random() for label/input linking under SSR.

Question 5

useTransition vs useDeferredValue?

Accepted Answer

useTransition marks state updates as non-urgent; useDeferredValue defers a derived value. Keep typing snappy while heavy lists update. Don't wrap every update—profile first.

Question 6

What is useImperativeHandle for?

Accepted Answer

Customize the instance value exposed to parent refs via forwardRef. Rare—prefer declarative props. Useful for focus() APIs on design-system inputs.

Question 7

How do you test a custom hook?

Accepted Answer

Use renderHook from Testing Library; assert returned values after act updates. Mock dependencies. Cover edge cases and cleanup.

Question 8

Lead: how do you govern hooks usage across a large React codebase?

Accepted Answer

Lint rules, shared hooks library, code review for effect overuse, docs for data-fetching standards. Ban ad-hoc fetch-in-effect if a data library is standard. Measure re-renders in critical flows.

Hooks React Interview Questions

Other React interview topics