reactintermediate
React Hooks Quiz
useState, useEffect, useContext, useMemo, useCallback, and custom hooks.
7 questions
By EZ4Code Team
1. What does the dependency array of useEffect control?
useEffect(() => {
fetchData(id);
}, [id]); // <-- this arrayWhen the effect re-runs (when dependencies change)
The order of effects
The number of times the effect runs
Nothing — it's optional and decorative
Explanation: The dependency array controls when the effect re-runs. `[id]` re-runs when `id` changes. `[]` runs only on mount. No array runs after every render. The cleanup function (returned from the effect) runs before the next effect and on unmount.
2. What does `useMemo` do?
const sorted = useMemo(() => items.sort(), [items]);Memoizes a computed value, recomputing only when deps change
Memoizes a function
Stores state
Creates a ref
Explanation: `useMemo` memoizes a computed value — it recomputes only when the dependencies change, returning the cached result otherwise. Useful for expensive calculations. `useCallback` is the equivalent for memoizing functions (it's `useMemo(() => fn, deps)` for functions).
3. What is `useContext` used for?
To consume a Context and avoid prop drilling
To create a new context
To replace useState
To make API calls
Explanation: `useContext` reads a Context value, letting you pass data through the component tree without prop drilling. Create a context with `createContext`, provide it with `<Context.Provider value={...}>`, and consume it with `useContext(Context)`.
4. What does `useRef` return?
const inputRef = useRef<HTMLInputElement>(null);A mutable object with a `.current` property
The DOM element directly
A state value
A Promise
Explanation: `useRef` returns a mutable ref object with a single `.current` property. Changing `.current` does NOT trigger a re-render. Common uses: accessing DOM elements (`ref={inputRef}`) and storing mutable values that don't affect rendering.
5. Why use `useCallback`?
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []);To memoize a function so it has a stable identity across renders
To call a function only once
To make a function async
To cache the function's return value
Explanation: `useCallback` returns a memoized callback with a stable identity (same reference across renders) unless its deps change. This is useful when passing callbacks to memoized child components — without it, the child would re-render every time because the function reference changes.
6. What is a custom hook?
function useWindowSize() {
const [size, setSize] = useState(window.innerWidth);
useEffect(() => {
const onResize = () => setSize(window.innerWidth);
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, []);
return size;
}A function starting with `use` that encapsulates reusable stateful logic
A class component
A built-in React hook
A type of context
Explanation: A custom hook is a JavaScript function whose name starts with `use` and that may call other hooks. It lets you extract and reuse stateful logic across components. Custom hooks must follow the Rules of Hooks (only call at the top level, not in conditions/loops).
7. Which is a violation of the Rules of Hooks?
// A
if (cond) {
const [x, setX] = useState(0);
}
// B
function Comp() {
const [x, setX] = useState(0);
return <div>{x}</div>;
}Calling useState inside an if statement (Option A)
Calling useState at the top of a component (Option B)
Both are violations
Neither is a violation
Explanation: Hooks must be called at the top level of a component or custom hook — never inside conditions, loops, or nested functions. React relies on the call order to associate state with the right hook. Calling hooks conditionally breaks this assumption and causes bugs.