Sharing state between components in React - Step-by-Step Execution

Concept Flow - Sharing state between components

Parent Component

↓

State declared with useState

↓

Pass state and setter as props

↓

Child Component A

↓

Read or update state

The parent component holds the state and passes it down to child components as props, allowing them to read or update the shared state.

Execution Sample

React

import React, { useState } from 'react';

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

Parent component holds count state and passes it to ChildA and ChildB components.

Execution Table

Step	Component	State/Props	Action	Result/Output
1	Parent	count=0	Declare state with useState(0)	State count initialized to 0
2	Parent	count=0	Render ChildA with prop count=0	ChildA receives count=0
3	Parent	count=0	Render ChildB with prop setCount	ChildB receives setCount function
4	ChildB	props.setCount	User clicks button to increment	Calls setCount(1)
5	Parent	count=0 -> 1	State updated by setCount	Parent re-renders with count=1
6	Parent	count=1	Render ChildA with count=1	ChildA receives updated count=1
7	Parent	count=1	Render ChildB with setCount	ChildB still has setCount function
8	ChildA	count=1	Display count	Shows count: 1
9	ChildB	props.setCount	Ready for next user action	Button ready to increment count again
10	End	-	No more actions	Execution stops

💡 No more user actions; state updates stop and components display latest count.

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
count	0	0	1	1

Key Moments - 3 Insights

Why does ChildA update its displayed count after ChildB calls setCount?

Because setCount updates the state in Parent, which causes Parent to re-render and pass the new count value to ChildA (see execution_table steps 4 to 6).

Can ChildB directly change the count variable?

No, ChildB cannot change count directly; it only calls the setCount function passed from Parent to request a state update (see execution_table step 4).

Why do both ChildA and ChildB re-render after the state changes?

Because they both receive props from Parent, and when Parent re-renders due to state change, it re-renders its children with updated props (see execution_table steps 5 to 7).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count after step 5?

A 1

B 0

C undefined

D 2

💡 Hint

Check the variable_tracker and execution_table row for step 5 where count updates.

At which step does ChildA receive the updated count value?

A Step 3

B Step 4

C Step 6

D Step 8

💡 Hint

Look at execution_table rows showing ChildA rendering with new props.

If ChildB did not receive setCount as a prop, what would happen when the button is clicked?

A The count would increment anyway.

B Nothing would happen; count stays the same.

C ChildA would update count directly.

D Parent would re-render automatically.

💡 Hint

Refer to execution_table step 4 where setCount is called to update state.

Concept Snapshot

Sharing state between components in React:
- Declare state in a common parent with useState.
- Pass state and setter as props to child components.
- Children read state via props and update via setter.
- Updating state triggers parent and children re-render.
- Enables synchronized shared data across components.

Full Transcript

In React, to share state between components, you keep the state in a parent component using useState. The parent passes the current state and the function to update it as props to child components. Child components can read the state from props and call the setter function to update it. When the setter is called, React updates the state in the parent, causing it to re-render and pass the new state down to children. This way, multiple components stay in sync with the shared state. For example, a Parent component holds a count state and passes count to ChildA and setCount to ChildB. When ChildB calls setCount, the count updates in Parent, and ChildA shows the new count.

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