React State Management u0026 Lifting State Up Quiz Quiz

1. Identifying State in React Components

   Which of the following is the best indicator that a value should be stored in React state?

   1. The value changes over time and affects the UI
   2. The value is constant throughout the app's lifetime
   3. The value comes from props and is never modified
   4. The value can be computed from other variables at any time
   5. The value doesn't affect rendering

2. Lifting State Up Purpose

   Why would you 'lift state up' in a React application?

   1. To share the same data between multiple child components
   2. To allow each child component to store its own private state
   3. To simplify code by placing all logic in one component
   4. To prevent prop drilling by using context instead
   5. To reduce re-renders in child components

3. State Update Syntax

   Which is the correct way to update 'count' in React state using the useState hook?

   1. setCount(count + 1);
   2. count = count + 1;
   3. this.state.count += 1;
   4. setState({count: count + 1});
   5. updateCount(addOne(count));

4. Identifying When to Lift State Up

   Given two sibling components needing to access and update the same data, what should you do?

   1. Move the state to their common parent component
   2. Copy the state to both siblings
   3. Store the shared state in each component's props
   4. Use local variables instead of state
   5. Place the state inside one sibling and pass it as props to the other

5. State vs. Props

   Which statement below is TRUE about props and state in React?

   1. Props are passed into a component, while state is managed within the component
   2. State can be passed from parent to child as is
   3. Props can only hold numbers and strings
   4. State values can only be set during component initialization
   5. Props and state always change in sync

6. Side Effects in State Management

   Which React hook should you use to handle side effects when a state value changes?

   1. useEffect
   2. useSharedState
   3. useCallback
   4. useReducer
   5. useStore

7. Two-way Binding and Lifting State Up

   A parent component manages 'inputValue' state and passes it to a child input. How should the child update this value?

   1. Call a function from props that updates the parent state
   2. Directly set the parent's state from the child
   3. Use useContext to access the value
   4. Change its own local state only
   5. Set props.inputValue directly in the child

8. Typo in 'setSate'

   What happens if you accidentally call 'setSate' instead of 'setState' in a class component?

   1. You get an error because 'setSate' is not defined
   2. The state updates normally
   3. React will warn but continue
   4. A runtime warning is shown, but nothing breaks
   5. Nothing happens and the code works as expected

9. State Lifting and Performance

   Which can be a possible downside of lifting state up unnecessarily?

   1. Causes unnecessary re-renders of child components
   2. Helps components have perfectly isolated states
   3. Reduces the amount of code in parent components
   4. Prevents children from communicating
   5. Always improves performance

10. Best Practice after Lifting State Up

    After lifting state up to a common parent, how should you organize callback functions for updating the state?

    1. Define the state-updating functions in the parent and pass them down as props
    2. Define update functions in each child separately
    3. Use global variables for updates
    4. Attach event listeners directly to DOM elements
    5. Let children update parent state by accessing it directly