Skip to content
QuiznExam

State Management and useState Quiz in ReactJS

Test your knowledge of state management in ReactJS with 15 multiple-choice questions covering the useState hook, state updates, functional updates, state immutability, lifting state up, sharing state between components, and common state management patterns.

15
Questions
12 min
Time limit
Medium
Difficulty

No sign-up needed · Last updated:

Save your score

At least 8 characters.

Forgot password?

Related quizzes

All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open

  1. 1. What is the primary purpose of the useState hook in React?

    • A. To manage component state
    • B. To navigate between pages
    • C. To fetch data from an API automatically
    • D. To define CSS styles
    Show answer

    A. To manage component state

    The useState hook adds state to function components and provides a setter function to request updates to that state.

  2. 2. What does the useState hook return?

    • A. A single state value
    • B. An object containing only the state setter
    • C. An array containing the current state and a setter function
    • D. A promise containing the state
    Show answer

    C. An array containing the current state and a setter function

    useState returns an array with the current state value and a setter function, which are commonly extracted using array destructuring.

  3. 3. How should a React component update a state variable declared with useState?

    • A. By directly assigning a new value to the state variable
    • B. By calling its setter function
    • C. By changing the component's props
    • D. By modifying the DOM directly
    Show answer

    B. By calling its setter function

    The setter function requests a state update and allows React to render the component with the updated state when necessary.

  4. 4. What happens when a component calls a useState setter with a different state value?

    • A. The entire browser always reloads
    • B. The state becomes a prop automatically
    • C. React immediately updates every component in the application
    • D. React schedules an update and may render the component again
    Show answer

    D. React schedules an update and may render the component again

    A state setter requests an update. React may batch updates and render the affected component again; if the next state is identical according to Object.is, React can skip rendering work.

  5. 5. Why is a functional state update useful when the next state depends on the previous state?

    • A. It prevents all component re-renders
    • B. It automatically converts state into props
    • C. It calculates the next state from the pending previous state
    • D. It makes state variables globally accessible
    Show answer

    C. It calculates the next state from the pending previous state

    A functional update such as setCount(previousCount => previousCount + 1) calculates the next value from the pending previous state and helps avoid stale-value issues.

  6. 6. What is the recommended way to update an object stored in React state?

    • A. Create a new object containing the updated properties
    • B. Modify the existing object directly without calling the setter
    • C. Convert the object into a DOM element
    • D. Update the object's properties only inside JSX
    Show answer

    A. Create a new object containing the updated properties

    React state should be treated as immutable. Creating a new object, often with the spread syntax, makes the update detectable and preserves the previous state object.

  7. 7. What is the correct way to update an array stored in React state by adding a new item?

    • A. Use push() on the existing state array without calling the setter
    • B. Create a new array containing the existing items and the new item
    • C. Change the array's length property directly
    • D. Modify the array only through a useEffect hook
    Show answer

    B. Create a new array containing the existing items and the new item

    Use a non-mutating operation such as the spread syntax or concat() to create a new array, then pass it to the state setter.

  8. 8. What is the purpose of the initial value passed to useState?

    • A. To define the component's final state permanently
    • B. To determine which route the component displays
    • C. To prevent the state from changing
    • D. To provide the initial state for the component
    Show answer

    D. To provide the initial state for the component

    The initial value establishes the state when the component is initialized. Subsequent renders use the current state rather than resetting it to the initial value.

  9. 9. When should a function be passed to useState as its initial argument?

    • A. Whenever the state is a boolean
    • B. Whenever the component receives props
    • C. When the initial state is expensive to calculate and should be initialized lazily
    • D. Whenever the state must update on every render
    Show answer

    C. When the initial state is expensive to calculate and should be initialized lazily

    Passing a function such as useState(() => calculateInitialValue()) lets React use it as a lazy initializer rather than using its return value from a function call written directly in the argument. In development Strict Mode, React may call the initializer twice to check for impurities.

  10. 10. What does lifting state up mean in React?

    • A. Moving shared state to the closest common parent of the components that need it
    • B. Moving all state into the browser URL
    • C. Converting state into CSS variables
    • D. Moving every state variable into a separate application
    Show answer

    A. Moving shared state to the closest common parent of the components that need it

    Lifting state up allows related components to share a single source of truth by storing the state in their closest common parent and passing values and handlers through props.

  11. 11. What happens when two separate components each declare their own useState variable with the same initial value?

    • A. React automatically synchronizes their state
    • B. They share the same state because they use the same hook
    • C. Both variables become global
    • D. Each component manages its own independent state
    Show answer

    D. Each component manages its own independent state

    Each component instance has its own state. To synchronize values across components, state can be lifted to a common parent or shared through an appropriate state management mechanism.

  12. 12. What is a common use case for combining useState with an input field?

    • A. Automatically creating database tables
    • B. Managing the value of a controlled form input
    • C. Replacing all event handlers
    • D. Preventing users from entering text
    Show answer

    B. Managing the value of a controlled form input

    A controlled input receives its value from React state and updates that state through an event handler such as onChange.

  13. 13. What is the recommended approach when multiple state updates depend on the same previous state during one event?

    • A. Assign directly to the state variable several times
    • B. Use setTimeout for every update
    • C. Use functional updater functions when each update depends on the previous result
    • D. Refresh the browser after each update
    Show answer

    C. Use functional updater functions when each update depends on the previous result

    Updater functions are processed using the pending state in sequence. For example, calling setCount(c => c + 1) three times requests three increments without relying on a potentially stale captured value.

  14. 14. Which React hook is often a better choice than several related useState variables when state transitions are complex?

    • A. useReducer
    • B. useMemo
    • C. useRef
    • D. useId
    Show answer

    A. useReducer

    useReducer centralizes state transition logic in a reducer function and is useful when updates involve multiple related values or complex actions.

  15. 15. Which statement about calling a useState setter is correct?

    • A. The setter always changes the state variable immediately in the currently running code
    • B. The setter can only be called inside JSX
    • C. The setter permanently disables future state updates
    • D. The current render's state value remains unchanged within that render's code
    Show answer

    D. The current render's state value remains unchanged within that render's code

    State values are snapshots for a particular render. Calling a setter requests a future render with updated state; it does not change the value captured by the currently executing code.