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.