Why lifting state is needed in React - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do we lift state up in React?

Imagine two sibling components need to share some data. Why is lifting state up to their common parent useful?

A It allows both siblings to access and update the shared state from a single source of truth.

B It duplicates the state in both siblings to keep them independent.

C It moves the state to a global variable outside React components.

D It prevents any component from updating the state to avoid bugs.

💡 Hint

Think about how components communicate and keep data consistent.

Lifting state up means moving shared state to the closest common parent. This way, siblings get the same data from one place, making updates consistent and easier to manage.

❓ component_behavior

intermediate

What happens if state is not lifted up?

Two sibling components each have their own state for the same data. What problem will likely occur?

A The components will merge their states behind the scenes.

B They will have inconsistent data because each manages its own copy.

C They will automatically sync their states without extra code.

D React will throw an error about duplicate states.

💡 Hint

Think about what happens when two people keep separate notes about the same thing.

If siblings keep separate state copies, changes in one won't reflect in the other. This causes UI inconsistencies and bugs.

❓ state_output

advanced

What is the output after lifting state up?

Given a parent component holding a count state and passing it to two child buttons, what happens when one button increments the count?

React

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ChildButton count={count} onClick={() => setCount(count + 1)} />
      <ChildDisplay count={count} />
    </>
  );
}

function ChildButton({ count, onClick }) {
  return <button onClick={onClick}>Increment: {count}</button>;
}

function ChildDisplay({ count }) {
  return <p>Current count: {count}</p>;
}

A Clicking the button does not update any count because state is not shared.

B Clicking the button updates only the button label, display stays the same.

C Clicking the button updates the count in Parent, so both button label and display show the new count.

D Clicking the button updates only the display, button label stays the same.

💡 Hint

State is held in Parent and passed down as props to both children.

Since the count state is in Parent, updating it triggers re-render of both children. Both show the updated count.

📝 Syntax

advanced

Identify the correct way to lift state up in React

Which code snippet correctly lifts state up to a parent component and passes it down to children?

A Parent holds state and passes value and setter as props to children; children call setter to update state.

B Children hold their own state and pass it up to Parent via props.

C Parent holds state but children create their own independent states ignoring props.

D State is declared inside children and Parent does not manage any state.

💡 Hint

Remember: lifting state means the parent owns the state and children receive it via props.

Correct lifting means the parent owns the state and passes it down. Children use props to read and callbacks to update.

🔧 Debug

expert

Why does this lifted state example cause a stale closure bug?

In this code, clicking the button does not update the count as expected. What is the cause?

React

function Parent() {
  const [count, setCount] = React.useState(0);
  const increment = React.useCallback(() => {
    setCount(count + 1);
  }, []);
  return <ChildButton onClick={increment} />;
}

function ChildButton({ onClick }) {
  return <button onClick={onClick}>Increment</button>;
}

A React.useState is used incorrectly; it should be React.state.

B The setCount function is not called correctly because onClick is missing parentheses.

C The ChildButton does not receive the onClick prop properly, so button does nothing.

D The increment function closes over the initial count value, so setCount always sets count to 1.

💡 Hint

Think about how JavaScript closures capture variables in functions.

The increment function captures the count value when Parent renders. It does not see updated count on later clicks, causing stale state updates.