State vs props comparison in React - Visual Side-by-Side Comparison

Concept Flow - State vs props comparison

Parent Component

↓

Pass props to Child

↓

Child Component receives props

↓

Child uses props to render

↓

Child Component

↓

Initialize state

↓

State changes via setState

↓

Component re-renders with new state

Props flow from parent to child and are read-only. State is local to a component and can change, causing re-render.

Execution Sample

React

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

function Child({ number }) {
  return <div>{number}</div>;
}

Parent passes a number as a prop to Child, which displays it.

Execution Table

Step	Component	State	Props	Action	Render Output
1	Parent	count=0	none	Initialize state	<Child number=0>
2	Child	none	number=0	Receive props	<div>0</div>
3	Parent	count=1	none	setCount(1) called	<Child number=1>
4	Child	none	number=1	Props updated	<div>1</div>
5	Parent	count=1	none	No further changes	<Child number=1>
6	Child	none	number=1	No further changes	<div>1</div>

💡 No more state changes; rendering stabilizes.

Variable Tracker

Variable	Start	After Step 3	Final
Parent.count	0	1	1
Child.props.number	0	1	1

Key Moments - 2 Insights

Why can't Child change the 'number' prop it receives?

Props are read-only inputs from the parent. The Child can only use them to render but cannot modify them, as shown in execution_table rows 2 and 4 where props change only when Parent updates state.

What causes the Child component to re-render?

When Parent's state changes (step 3), it passes new props to Child, triggering Child to re-render with updated props (step 4).

Visual Quiz - 3 Questions

Look at the execution table at step 3. What is the value of Parent's state 'count'?

A 0

B undefined

C 1

D null

💡 Hint

Check the 'State' column for Parent at step 3 in the execution_table.

At which step does the Child component receive updated props?

A Step 4

B Step 2

C Step 1

D Step 6

💡 Hint

Look at the 'Props' and 'Action' columns for Child in the execution_table.

If Parent's state never changes, how many times does Child re-render?

A Zero

B Once

C Twice

D Three times

💡 Hint

Refer to variable_tracker and execution_table steps 1 and 2 for initial render only.

Concept Snapshot

Props are inputs passed from parent to child components.
Props are read-only and cannot be changed by the child.
State is local to a component and can be changed with setState.
Changing state causes the component to re-render.
Props changes come from parent updates, triggering child re-render.
State changes are internal and managed by the component itself.

Full Transcript

In React, props and state are two ways components handle data. Props are like gifts a parent gives to a child component; the child can use them but cannot change them. State is like a component's own memory that it can update. When a parent changes its state, it can pass new props to the child, causing the child to update what it shows. This flow is shown step-by-step in the execution table, where the parent starts with count zero, passes it as a prop, then updates count to one, which updates the child's props and causes it to re-render. Understanding that props are read-only and state is local and changeable helps avoid confusion when building React apps.