Short answer
Hooks are functions that let function components use React features such as state (useState), side effects (useEffect), context (useContext) and refs (useRef). There are two rules: call hooks only at the top level of a component or custom hook — never inside loops, conditions or nested functions — and call them only from React function components or other hooks.
Why the rules exist
React identifies each hook by the order in which it is called during render. If a hook is skipped conditionally, every hook after it shifts position and React attaches state to the wrong call.
The hooks you will be asked about
- useState — local state with a setter that schedules a re-render.
- useEffect — synchronise with external systems after render.
- useMemo and useCallback — keep values or functions stable between renders.
- useRef — a mutable container that does not trigger re-renders.
- useContext — read a value from the nearest provider.
Custom hooks
A custom hook is a function starting with “use” that composes other hooks. It shares logic, not state: each component calling it gets its own independent state.
How to answer it in an interview
- Explain the call-order reason behind the rules — it shows real understanding.
- Give an example custom hook such as useDebouncedValue.
- Mention the eslint-plugin-react-hooks rules if asked about enforcing them.