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.

Practice

1. Which of the following best describes the difference between state and props in React?

easy

A. Props can change inside a component; state is fixed.

B. State is internal and can change; props are external and read-only.

C. State and props are both used to pass data from parent to child.

D. Props are used only for styling; state holds all data.

Solution

1. Step 1: Understand what state is

   State is data managed inside a component that can change over time.

2. Step 2: Understand what props are

   Props are data passed from a parent component to a child component and cannot be changed by the child.

3. Final Answer:

   State is internal and can change; props are external and read-only. -> Option B

4. Quick Check:

   State changes internally, props are read-only from parent [OK]

Hint: State changes inside; props come from outside [OK]

Common Mistakes:

• Thinking props can be changed inside the child component
• Confusing state as data passed from parent
• Believing props hold styling only

2. Which of the following is the correct way to pass a prop named title with value "Hello" to a child component Header?

easy

A. <Header title="Hello" />

B. <Header {title: "Hello"} />

C. <Header title={Hello} />

D. <Header title: "Hello" />

Solution

1. Step 1: Recall JSX syntax for passing props

   Props are passed as attributes inside the component tag, like HTML attributes.

2. Step 2: Check correct syntax for string prop

   Use quotes around string values: title="Hello".

3. Final Answer:

   <Header title="Hello" /> -> Option A

4. Quick Check:

   Props use attribute syntax with quotes for strings [OK]

Hint: Use attribute="value" syntax for string props [OK]

Common Mistakes:

• Using curly braces without variable for string
• Using object-like syntax inside JSX tag
• Using colon instead of equals sign

3. Consider this React component code:

function Counter({ initial }) {
  const [count, setCount] = React.useState(initial);
  return <div>Count: {count}</div>;
}

// Usage:
<Counter initial={5} />

What will be displayed when this component renders?

medium

A. Count: 0

B. Count: undefined

C. Count: 5

D. Count: initial

Solution

1. Step 1: Understand prop usage

   The prop initial is passed with value 5 to the Counter component.

2. Step 2: Understand state initialization

   The state count is initialized with initial, so count starts at 5.

3. Final Answer:

   Count: 5 -> Option C

4. Quick Check:

   State initialized from prop value 5 [OK]

Hint: State starts with prop value passed in [OK]

Common Mistakes:

• Assuming state starts at 0 by default
• Printing the prop name instead of value
• Confusing undefined with missing prop

4. What is wrong with this React component code?

function Message(props) {
  props.text = "Hello";
  return <div>{props.text}</div>;
}

medium

A. You cannot assign a new value to props inside a component.

B. The return statement is missing parentheses.

C. The component should use state instead of props.

D. The component must be a class to modify props.

Solution

1. Step 1: Understand props immutability

   Props are read-only and cannot be changed inside the component.

2. Step 2: Identify the error in code

   Assigning props.text = "Hello" tries to modify props, which is not allowed.

3. Final Answer:

   You cannot assign a new value to props inside a component. -> Option A

4. Quick Check:

   Props are immutable inside components [OK]

Hint: Props are read-only; never assign to them [OK]

Common Mistakes:

• Trying to change props directly
• Confusing props with state
• Thinking only class components can modify props

5. You want a component to display a counter that starts from a value passed by its parent and can be incremented by the user. Which approach correctly uses state and props?

hard

A. Modify the prop value directly when user clicks increment.

B. Keep counter value only in props and pass updated props from child to parent.

C. Use props only and update them inside the component.

D. Initialize state with the prop value; update state on user action; do not modify props.

Solution

1. Step 1: Understand data flow

   Props provide initial data from parent; state holds data that changes inside the component.

2. Step 2: Apply correct usage

   Initialize state with prop value, then update state on user actions. Props remain unchanged.

3. Final Answer:

   Initialize state with the prop value; update state on user action; do not modify props. -> Option D

4. Quick Check:

   State changes internally; props stay read-only [OK]

Hint: Use props for initial value, state for changes [OK]

Common Mistakes:

• Trying to change props directly
• Using props to hold changing data
• Passing updated data from child to parent incorrectly