Common lifting state patterns in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component when clicking the button?

Consider a parent component that lifts state up to share a counter value between two child components. What will be displayed after clicking the increment button once?

React

import React, { useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <Display count={count} />
      <IncrementButton onIncrement={() => setCount(count + 1)} />
    </>
  );
}

function Display({ count }) {
  return <p>Count: {count}</p>;
}

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

export default Parent;

A Count: 1

B Count: 0

C Count: undefined

D Button does not work

💡 Hint

Think about how the state updates and re-renders the display component.

The Parent component holds the count state. Clicking the button calls setCount(count + 1), updating the state to 1. This causes Parent to re-render, passing count=1 to Display, which shows "Count: 1".

❓ state_output

intermediate

What is the value of count after clicking the button twice quickly?

Given this React component lifting state up, what will be the final count value after clicking the increment button twice quickly?

React

import React, { useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </>
  );
}

export default Parent;

A Count: 0

B Count: 2

C Count: 1

D Count: NaN

💡 Hint

Consider how React batches state updates and the closure over count.

Because setCount(count + 1) uses the current count value from closure, both clicks see count as 0 and set it to 1. React batches updates, so final count is 1, not 2.

📝 Syntax

advanced

Which option correctly lifts state up to share input value between siblings?

You want two sibling components to share the same input value by lifting state up to their parent. Which code snippet correctly implements this pattern?

A

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <Input value={value} onChange={e => setValue(e.target.value)} />
      <Display value={value} />
    </>
  );
}

function Input({ value, onChange }) {
  return <input value={value} onChange={onChange} />;
}

function Display({ value }) {
  return <p>{value}</p>;
}

B

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <Input defaultValue={value} onChange={e => setValue(e.target.value)} />
      <Display value={value} />
    </>
  );
}

function Input({ defaultValue, onChange }) {
  return <input defaultValue={defaultValue} onChange={onChange} />;
}

function Display({ value }) {
  return <p>{value}</p>;
}

C

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <Input onChange={e => setValue(e.target.value)} />
      <Display value={value} />
    </>
  );
}

function Input({ onChange }) {
  return <input onChange={onChange} />;
}

function Display({ value }) {
  return <p>{value}</p>;
}

D

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <Input value={value} />
      <Display value={value} />
    </>
  );
}

function Input({ value }) {
  return <input value={value} />;
}

function Display({ value }) {
  return <p>{value}</p>;
}

💡 Hint

Controlled inputs need value and onChange props to update state.

Option A correctly passes value and onChange to the input, making it controlled and syncing state. Option A uses defaultValue which does not update after initial render. Option A lacks value prop, so input is uncontrolled. Option A lacks onChange, so input cannot update state.

🔧 Debug

advanced

Why does the child's useEffect not log updates when parent state changes?

Given this React code lifting state up, the console.log in the child component's useEffect does not show updates when the parent state changes. What is the cause?

React

function Parent() {
  const [text, setText] = React.useState('');
  return (
    <>
      <input onChange={e => setText(e.target.value)} />
      <Child text={text} />
    </>
  );
}

function Child({ text }) {
  React.useEffect(() => {
    console.log('Text changed:', text);
  }, []);
  return <p>{text}</p>;
}

A The input element is missing a value prop, so it cannot update state.

B The Child's useEffect dependency array is empty, so it does not run on text changes.

C The Parent does not pass the text prop correctly to Child.

D The Child component does not render the text prop.

💡 Hint

Check the dependencies of useEffect in the child component.

The Child component's useEffect has an empty dependency array, so it runs only once on mount. It does not react to changes in the text prop. This causes the console.log to not show updates, but the displayed text updates correctly because it uses the prop directly.

🧠 Conceptual

expert

Which pattern best describes lifting state up in React?

When multiple sibling components need to share and update the same data, what is the best React pattern to manage this?

A Each sibling manages its own state independently and uses context to sync values.

B Duplicate the state in each sibling and synchronize them with event listeners.

C Use global variables outside React components to hold shared state and access them directly.

D Store the shared state in their closest common parent and pass it down as props with callbacks to update it.

💡 Hint

Think about React's recommended way to share state between siblings.

Lifting state up means moving shared state to the closest common ancestor and passing it down as props. This keeps state in one place and ensures consistent data flow. Other options cause complexity, bugs, or break React's data flow principles.

Practice

1. What is the main reason to lift state up in React?
lifting state means moving state to a common parent component.

easy

A. To make components independent

B. To share state between sibling components

C. To avoid using props

D. To store state only in child components

Solution

1. Step 1: Understand lifting state concept

   Lifting state means moving state to a common parent so multiple children can access it.

2. Step 2: Identify the purpose of lifting state

   This is done to share state between sibling components and keep data in sync.

3. Final Answer:

   To share state between sibling components -> Option B

4. Quick Check:

   Lifting state = sharing state [OK]

Hint: Lifting state shares data between siblings via parent [OK]

Common Mistakes:

• Thinking lifting state makes components independent
• Believing lifting state removes props usage
• Assuming state stays only in children

2. Which of the following is the correct way to pass state and its updater function from a parent to a child component in React?

easy

A. <Child state={state} setState={setState} />

B. <Child state=setState />

C. <Child setState={state} state={setState} />

D. <Child state=setState() />

Solution

1. Step 1: Recall React props syntax

   Props are passed as name={value}. To pass state and updater, use state={state} and setState={setState}.

2. Step 2: Check each option's syntax

   <Child state={state} setState={setState} /> correctly passes both as props. Others misuse assignment or call functions incorrectly.

3. Final Answer:

   <Child state={state} setState={setState} /> -> Option A

4. Quick Check:

   Props pass state and updater correctly [OK]

Hint: Props use curly braces for variables [OK]

Common Mistakes:

• Passing functions without curly braces
• Calling updater functions instead of passing them
• Swapping state and updater names

3. Given this parent component code:

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

What will happen when the Button is clicked?

medium

A. Nothing happens because count is not updated

B. The Button component will re-render but count stays the same

C. The count displayed by Display increases by 1

D. An error occurs because setCount is not passed to Button

Solution

1. Step 1: Understand state and props flow

   The Parent holds count state and passes count to Display and an onClick handler to Button.

2. Step 2: Analyze Button click effect

   Clicking Button calls setCount(count + 1), updating state and causing Parent to re-render with new count.

3. Final Answer:

   The count displayed by Display increases by 1 -> Option C

4. Quick Check:

   State update triggers re-render and display update [OK]

Hint: State update in parent re-renders children with new props [OK]

Common Mistakes:

• Thinking Button needs count prop to update
• Believing setCount must be passed to Display
• Assuming no re-render happens on state change

4. Identify the error in this code snippet where a parent tries to lift state:

function Parent() {
  const [value, setValue] = React.useState('');
  return <Child value={value} setValue={value} />;
}

medium

A. setValue prop is incorrectly assigned the state value instead of the updater function

B. value state is not initialized properly

C. Child component is missing parentheses

D. React.useState should be React.state

Solution

1. Step 1: Check props passed to Child

   Parent passes value={value} correctly but setValue={value} incorrectly passes the state value instead of the updater function.

2. Step 2: Understand correct usage

   setValue should be passed as setValue={setValue} to allow Child to update state.

3. Final Answer:

   setValue prop is incorrectly assigned the state value instead of the updater function -> Option A

4. Quick Check:

   Updater function must be passed, not state value [OK]

Hint: Pass updater function, not state value, as setState prop [OK]

Common Mistakes:

• Confusing state variable with updater function
• Forgetting curly braces around variables
• Assuming React.useState is incorrect

5. You have two sibling components, InputA and InputB, both need to update and display the same text value. Which pattern correctly lifts state to their parent to keep them in sync?

hard

A. Use local variables in siblings without state

B. Store text state separately in each sibling, update independently

C. Store text state in one sibling and pass it down to the other sibling

D. Store text state in parent, pass text and setText to both siblings as props

Solution

1. Step 1: Understand shared state need

   Both siblings must show and update the same text, so state must be shared.

2. Step 2: Apply lifting state pattern

   Lift text state to their common parent and pass text and setText as props to both siblings.

3. Step 3: Evaluate other options

   Storing state separately or in one sibling breaks sync; local variables don't persist or trigger re-renders.

4. Final Answer:

   Store text state in parent, pass text and setText to both siblings as props -> Option D

5. Quick Check:

   Lift state to parent for shared updates [OK]

Hint: Lift shared state to parent, pass state and updater down [OK]

Common Mistakes:

• Keeping separate states in siblings causing out-of-sync
• Passing state only one way between siblings
• Using local variables instead of state