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.

Practice

1. What is the main reason to share state between React components?

easy

A. To keep data consistent and allow multiple components to use the same information

B. To make each component have its own separate data

C. To avoid using props in components

D. To prevent components from rendering

Solution

1. Step 1: Understand the purpose of shared state

   Sharing state means keeping data in one place so multiple components can access and update it.

2. Step 2: Identify the benefit of shared state

   This helps keep the app consistent and easier to manage because all components see the same data.

3. Final Answer:

   To keep data consistent and allow multiple components to use the same information -> Option A

4. Quick Check:

   Sharing state = data consistency [OK]

Hint: Shared state means one source of truth for data [OK]

Common Mistakes:

• Thinking each component should have its own separate state always
• Confusing props with state sharing
• Believing sharing state prevents rendering

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

easy

A. <Child state=setState />

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

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

D. <Child state>{state}</Child>

Solution

1. Step 1: Recall how props are passed in JSX

   Props are passed as attributes with values, like propName={value}.

2. Step 2: Identify correct syntax for passing state and updater

   The parent passes both state and setState as props: <Child state={state} setState={setState} />.

3. Final Answer:

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

4. Quick Check:

   Props syntax = attribute=value [OK]

Hint: Props use attribute={value} syntax [OK]

Common Mistakes:

• Using children tags incorrectly to pass props
• Passing updater as a child instead of prop
• Missing curly braces around JavaScript expressions

3. Given this React code, what will be displayed when the button is clicked?

function Parent() {
  const [count, setCount] = React.useState(0);
  return <Child count={count} setCount={setCount} />;
}

function Child({ count, setCount }) {
  return <>
    <p>Count: {count}</p>
    <button onClick={() => setCount(count + 1)}>Increment</button>
  </>;
}

medium

A. Count: 0 initially, but button does nothing

B. Count: 1 initially, then stays the same on click

C. Count: 0 initially, then increases by 1 each click

D. Error because setCount is not defined

Solution

1. Step 1: Understand initial state and props

   The parent sets count to 0 initially and passes count and setCount to Child.

2. Step 2: Analyze button click behavior

   Clicking the button calls setCount(count + 1), increasing count by 1 each time.

3. Final Answer:

   Count: 0 initially, then increases by 1 each click -> Option C

4. Quick Check:

   useState count increments on click [OK]

Hint: State updates cause re-render with new value [OK]

Common Mistakes:

• Thinking count starts at 1
• Assuming button does not update state
• Confusing setCount usage or scope

4. Identify the error in this React code that tries to share state between components:

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

function Child({ value, setValue }) {
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

medium

A. value state is not initialized properly

B. onChange handler syntax is invalid

C. Child component should not receive props

D. setValue prop is passed incorrectly as value instead of the updater function

Solution

1. Step 1: Check props passed from Parent

   Parent passes setValue={value} instead of setValue={setValue}, so setValue is a string, not a function.

2. Step 2: Understand effect on Child component

   Child tries to call setValue as a function on input change, but it is a string, causing an error.

3. Final Answer:

   setValue prop is passed incorrectly as value instead of the updater function -> Option D

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:

• Passing state value instead of updater function
• Ignoring prop names mismatch
• Assuming onChange syntax is wrong

5. You want to share a counter state between two sibling components in React. Which approach correctly shares the state so both siblings update together?

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <SiblingA count={count} setCount={setCount} />
      <SiblingB count={count} setCount={setCount} />
    </>
  );
}

What is the key reason this works?

hard

A. State is lifted to the common parent and passed down, so both siblings share the same source

B. Each sibling has its own state, so they update independently

C. Using context API is required for siblings to share state

D. State is stored inside each sibling, but synchronized automatically

Solution

1. Step 1: Understand state lifting

   The parent holds the state and updater, passing them as props to both siblings.

2. Step 2: Explain shared state effect

   Because both siblings receive the same state and updater, changes in one update the parent's state, causing both to re-render with the new value.

3. Final Answer:

   State is lifted to the common parent and passed down, so both siblings share the same source -> Option A

4. Quick Check:

   Lift state up for shared data [OK]

Hint: Lift state to parent to share between siblings [OK]

Common Mistakes:

• Thinking siblings can share state without lifting or context
• Believing context API is always required
• Assuming state sync happens automatically without shared source