React practice questions with answers

Practise React questions at your own pace: hooks, state, props, effects, keys, memoisation and rendering. Pick an answer to see whether you are right and why. Nothing is timed or ranked here; for that, play the Daily Quiz at 4 PM IST.

1. What does useState return?

   easy

   1. The current value only
   2. An array of the current value and a function to update it
   3. A promise
   4. An object with get and set

   Answer: B. An array of the current value and a function to update it

   Explanation: const [count, setCount] = useState(0). Calling setCount schedules a re-render with the new value.

2. Why does React need a key prop on items rendered from a list?

   easy

   1. For CSS styling
   2. To identify each item between renders so React can update, reorder or remove the right element
   3. To make items clickable
   4. For accessibility

   Answer: B. To identify each item between renders so React can update, reorder or remove the right element

   Explanation: Use a stable, unique id. Using the array index as the key causes bugs when items are reordered or inserted.

3. Which hook runs side effects such as fetching data after render?

   easy

   1. useState
   2. useEffect
   3. useMemo
   4. useRef

   Answer: B. useEffect

   Explanation: useEffect runs after the render is committed. Its dependency array controls when it runs again; it can return a cleanup function.

4. How do you pass data from a parent component to a child?

   easy

   1. With props
   2. With a global variable
   3. With useEffect
   4. Children cannot receive data

   Answer: A. With props

   Explanation: Props flow down. For data many components need, use context or a state library instead of passing props through every level.

5. When does an effect with an empty dependency array, useEffect(fn, []), run?

   medium

   1. On every render
   2. Once after the first render (and its cleanup on unmount)
   3. Never
   4. Before the first render

   Answer: B. Once after the first render (and its cleanup on unmount)

   Explanation: In development with StrictMode React runs it twice on mount to help you find missing cleanups, but in production it runs once.

6. After clicking once, what does the button show?

   medium

   function Counter() {
     const [n, setN] = useState(0);
     return <button onClick={() => { setN(n + 1); setN(n + 1); }}>{n}</button>;
   }

   1. 0
   2. 1
   3. 2
   4. NaN

   Answer: B. 1

   Explanation: Both calls use the n captured in this render (0), so both set it to 1. Use the updater form setN(prev => prev + 1) to apply both.

7. What is the difference between useMemo and useCallback?

   medium

   1. They are the same
   2. useMemo caches a computed value; useCallback caches a function
   3. useCallback runs effects
   4. useMemo is for state

   Answer: B. useMemo caches a computed value; useCallback caches a function

   Explanation: useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). Both only help when the cached result is passed to something that cares about identity.

8. What does lifting state up mean?

   medium

   1. Moving state into a global store
   2. Moving shared state to the closest common parent so siblings stay in sync
   3. Using useRef instead of useState
   4. Putting state in the URL

   Answer: B. Moving shared state to the closest common parent so siblings stay in sync

   Explanation: The parent owns the state and passes it (and its setter) down as props to the children that need it.

9. Why should you not mutate state directly, as in items.push(x); setItems(items)?

   hard

   1. It is slower
   2. React compares by reference; the same array means no re-render may happen, and other code sharing that array changes too
   3. push is not allowed in JSX
   4. It throws an error

   Answer: B. React compares by reference; the same array means no re-render may happen, and other code sharing that array changes too

   Explanation: Create a new array: setItems([...items, x]). Immutable updates make changes detectable and predictable.

10. What is useRef commonly used for? (Select all that apply)

    hard

    1. Getting a reference to a DOM element
    2. Keeping a mutable value across renders without causing a re-render
    3. Triggering a re-render when it changes
    4. Storing a timer or interval id

    Answer: A. Getting a reference to a DOM element; B. Keeping a mutable value across renders without causing a re-render; D. Storing a timer or interval id

    Explanation: Changing ref.current never re-renders. Use state for values that should update the UI.

11. What does React reconciliation do?

    hard

    1. Merges CSS files
    2. Compares the new element tree with the previous one and applies the minimal set of DOM changes
    3. Re-downloads components
    4. Validates props

    Answer: B. Compares the new element tree with the previous one and applies the minimal set of DOM changes

    Explanation: React diffs by element type and key. Different types replace the subtree; matching keys let it reuse and move elements.

12. A component re-renders often and is slow. Which is usually the right first step?

    hard

    1. Wrap everything in useMemo
    2. Measure with the React Profiler, then memoize the expensive part (React.memo, useMemo) or move state closer to where it is used
    3. Switch to class components
    4. Disable StrictMode

    Answer: B. Measure with the React Profiler, then memoize the expensive part (React.memo, useMemo) or move state closer to where it is used

    Explanation: Memoization has costs too. Find the real bottleneck first; often moving state down or splitting a component is the cleanest fix.

Play the Daily Quiz at 4 PM IST