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.