Sharing state between components in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component pair?

Consider two components: Parent holds a state and passes it to Child. What will Child display?

React

import React, { useState } from 'react';

function Child({ message }) {
  return <p>{message}</p>;
}

function Parent() {
  const [msg] = useState('Hello from Parent');
  return <Child message={msg} />;
}

A A runtime error occurs because 'message' prop is missing.

B An empty paragraph is displayed with no text.

C The text 'Hello from Parent' is displayed inside a paragraph.

D The component renders nothing because state is not passed.

💡 Hint

Look at how Parent passes the msg state as a prop to Child.

The Parent component initializes state msg with 'Hello from Parent'. It passes this state as the message prop to Child. The Child component renders this prop inside a paragraph, so the text 'Hello from Parent' appears.

❓ state_output

intermediate

What is the value of shared state after both components update it?

Two sibling components share a state lifted to their parent. Both update the state once. What is the final state value?

React

import React, { useState } from 'react';

function SiblingA({ count, setCount }) {
  return <button onClick={() => setCount(count + 1)}>Increment A</button>;
}

function SiblingB({ count, setCount }) {
  return <button onClick={() => setCount(count + 2)}>Increment B</button>;
}

function Parent() {
  const [count, setCount] = useState(0);
  // Simulate both buttons clicked once
  React.useEffect(() => {
    setCount(count + 1);
    setCount(count + 2);
  }, []);
  return (
    <>
      <SiblingA count={count} setCount={setCount} />
      <SiblingB count={count} setCount={setCount} />
      <p>{count}</p>
    </>
  );
}

A 2

B 1

C 3

D 0

💡 Hint

Remember that state updates inside useEffect with the same base value do not accumulate automatically.

Both setCount calls use the initial count value 0 due to stale closure. The first schedules an update to 1, the second to 2. React processes these sequentially within the batch, so the final count is 2, displayed in the paragraph.

📝 Syntax

advanced

Which option correctly shares state using React Context?

Identify the correct way to create and use a React Context to share a string state between components.

React

import React, { useState, useContext } from 'react';

const MyContext = React.createContext();

function Provider({ children }) {
  const [value, setValue] = useState('shared');
  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
}

function Consumer() {
  const context = useContext(MyContext);
  return <p>{context.value}</p>;
}

A Use <Consumer /> without <Provider>, it displays 'shared'.

B Wrap <Consumer /> inside <Provider> but forget to pass value prop, causes error.

C Use <Provider> without children, causes runtime error.

D Wrap <Consumer /> inside <Provider> and it displays 'shared'.

💡 Hint

Context value must be passed via value prop on Provider.

React Context requires wrapping consumers inside a provider that passes a value. Option D correctly wraps Consumer inside Provider with the value prop, so Consumer can access and display 'shared'. Option D lacks provider so context is undefined. Option D misses value prop causing error. Option D has no children so nothing renders.

🔧 Debug

advanced

Why does this shared state not update in sibling components?

Given this code, why do sibling components not reflect updated shared state?

React

import React, { useState } from 'react';

function SiblingA({ count }) {
  return <p>A: {count}</p>;
}

function SiblingB({ count }) {
  return <p>B: {count}</p>;
}

function Parent() {
  let count = 0;
  function increment() {
    count += 1;
  }
  return (
    <>
      <button onClick={increment}>Increment</button>
      <SiblingA count={count} />
      <SiblingB count={count} />
    </>
  );
}

A The increment function is not called on button click.

B State is not managed with useState, so React does not re-render on change.

C Sibling components do not receive the count prop.

D The count variable is declared inside Parent, causing a syntax error.

💡 Hint

React only re-renders when state or props change via hooks or parent updates.

The count variable is a normal variable, not state. Updating it does not trigger React to re-render components. Therefore, SiblingA and SiblingB never see updated values. Using useState to manage count fixes this.

🧠 Conceptual

expert

Which approach best shares complex state between deeply nested components?

You have a deeply nested component tree and want to share complex state (like user settings) across many components. Which approach is best?

A Use React Context to provide state and updater functions at a high level and consume where needed.

B Use local state in each component and synchronize manually via callbacks.

C Use global variables outside React and access them directly inside components.

D Lift state up to the nearest common ancestor and pass props down through every level.

💡 Hint

Think about avoiding prop drilling and keeping state in sync easily.

Lifting state up and passing props down (A) causes 'prop drilling' which is hard to maintain for deep trees. Local state with manual sync (B) is error-prone and complex. Global variables (D) break React's reactive model and cause bugs. React Context (C) is designed to share state easily across many nested components without prop drilling.