Interview questions
Hooks, rendering and state management in modern React.
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.
useEffect runs after React commits a render. The dependency array tells React when to re-run it: with no array it runs after every render, with an empty array it runs once after mount, and with values it re-runs whenever one of them changes by Object.is comparison. The optional cleanup function runs before the next effect and on unmount.
React describes UI as a tree of elements. When state changes, it renders a new tree and compares it with the previous one — reconciliation — to compute the minimal set of DOM updates. It assumes elements of different types produce different trees and uses keys to match list items, which keeps diffing fast and predictable.
useMemo caches the result of a calculation between renders; useCallback caches a function definition. Use them when a computation is genuinely expensive, or when a stable reference matters — for example, a prop passed to a memoised child or a value in an effect’s dependency array. Adding them everywhere adds complexity without measurable benefit.
Start free, install the Windows app and run a practice session today.
