Parent-child data flow in React - Step-by-Step Execution

Concept Flow - Parent-child data flow

Parent Component

↓

Child Component

↓

Child renders UI

↓

Parent updates state

↓

Parent re-renders and passes new props

The parent sends data down to the child via props. The child uses these props to display or act. If the child needs to send data back, it calls a function from the parent, which updates the parent's state and triggers a re-render.

Execution Sample

React

import React, { useState } from 'react';

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

function Child({ count, onClick }) {
  return <button onClick={onClick}>Count: {count}</button>;
}

Parent holds count state and passes it plus a click handler to Child. Child shows count and calls handler on click to update Parent.

Execution Table

Step	Parent State (count)	Props Passed to Child	Child Render Output	Action Taken
1	0	{count:0, onClick:function}	<button>Count: 0</button>	Initial render
2	0	{count:0, onClick:function}	User clicks button	Child calls onClick
3	1	{count:1, onClick:function}	<button>Count: 1</button>	Parent state updated, re-render
4	1	{count:1, onClick:function}	User clicks button	Child calls onClick
5	2	{count:2, onClick:function}	<button>Count: 2</button>	Parent state updated, re-render
6	2	{count:2, onClick:function}	No further clicks	Execution stops

💡 No more user clicks, so no state changes or re-renders occur.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count	0	1	2	2	2

Key Moments - 2 Insights

Why does the child component update its displayed count when the parent state changes?

Because the parent passes the updated count as a prop to the child on each render (see execution_table rows 3 and 5). The child re-renders with new props automatically.

How does the child send data back to the parent to update the count?

The parent passes a function (onClick) as a prop to the child. When the child calls this function (execution_table rows 2 and 4), the parent updates its state.

Visual Quiz - 3 Questions

Look at the execution table at step 3. What is the value of count in the parent state?

A 0

B 1

C 2

D undefined

💡 Hint

Check the 'Parent State (count)' column at step 3 in the execution_table.

At which step does the child component call the parent's onClick function for the second time?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look for 'Child calls onClick' in the 'Action Taken' column in execution_table.

If the parent did not pass the onClick function as a prop, what would happen when the button is clicked?

A The count would increase anyway

B The child would update its own count state

C Nothing would happen because child cannot update parent state

D An error would occur immediately

💡 Hint

Refer to how data flows from parent to child and how child calls parent's function in execution_table.

Concept Snapshot

Parent-child data flow in React:
- Parent holds state
- Parent passes data and functions as props to child
- Child uses props to render UI
- Child calls parent's function prop to send data back
- Parent updates state and re-renders
- Data flows down, events flow up

Full Transcript

In React, the parent component holds state and passes data to the child component using props. The child uses these props to display information. If the child needs to update the parent's state, it calls a function passed down from the parent as a prop. When the parent state changes, React re-renders the parent and child with updated props. This creates a clear one-way data flow from parent to child, and event flow from child to parent.