State vs props comparison in React - Trade-offs & Expert Analysis

Overview - State vs props comparison

What is it?

In React, 'state' and 'props' are two ways to manage data in components. State is data that a component controls and can change over time. Props are data passed from a parent component to a child component and cannot be changed by the child. Both help components display dynamic content and respond to user actions.

Why it matters

Without understanding state and props, building interactive and reusable components in React would be confusing. State lets components remember things and update themselves, while props let components share information. Without these, apps would be static and hard to maintain.

Where it fits

Before learning this, you should know basic React components and JSX syntax. After this, you can learn about hooks like useState and useEffect, component lifecycle, and advanced state management libraries like Redux.

Mental Model

Core Idea

State is the component's own memory that it can change, while props are like messages from parents that the component reads but cannot change.

Think of it like...

Think of a component as a person: state is their personal diary they can write in and change anytime, while props are letters they receive from others that they can read but not edit.

┌───────────────┐       ┌───────────────┐
│ Parent        │       │ Child         │
│ (holds state) │──────▶│ (receives     │
│               │ props │ props only)   │
│               │       │               │
│               │       │ State (own)   │
│               │       │ can change)   │
└───────────────┘       └───────────────┘

Build-Up - 7 Steps

1

Foundation

What are props in React

Concept: Props are inputs to components, passed from parent to child.

Props are like function arguments. A parent component writes and the Child component receives 'name' as a prop. Props are read-only inside the child component.

Result

Child components display or use data passed via props but cannot modify them.

Understanding props as read-only inputs helps keep components predictable and reusable.

2

Foundation

What is state in React

Concept: State is data a component owns and can change over time.

State is created inside a component using useState hook. For example, const [count, setCount] = useState(0) lets the component remember and update 'count'. Changing state causes the component to re-render.

Result

Components can remember user actions or data changes and update their display accordingly.

Knowing state is local and mutable data explains how React components stay interactive.

3

Intermediate

Props are immutable inside components

🤔Before reading on: do you think a child component can change its props? Commit to yes or no.

Concept: Props cannot be changed by the component that receives them.

If a child tries to modify props, React will ignore it or cause errors. Props are meant to be fixed inputs from parents. To change data, the parent must update props or the child must use state.

Result

Props remain stable and predictable, preventing unexpected side effects.

Recognizing props as immutable enforces clear data flow and component boundaries.

4

Intermediate

State updates cause re-rendering

🤔Before reading on: does changing state always update the UI immediately? Commit to yes or no.

Concept: When state changes, React re-renders the component to reflect new data.

Calling the state setter function (like setCount) schedules a re-render. React then updates the displayed UI to match the new state value.

Result

UI stays in sync with the component's data automatically.

Understanding this automatic update cycle is key to building dynamic interfaces.

5

Intermediate

Passing state down as props

Concept: State can be owned by a parent and passed down as props to children.

A parent component holds state and passes it as props to children. Children display or use this data but cannot change it directly. To update, children can call functions passed as props to request changes.

Result

Data flows top-down, keeping the app organized and easy to debug.

Knowing this pattern helps manage shared data and user interactions across components.

6

Advanced

Why not put all data in state

🤔Before reading on: do you think all data in a component should be in state? Commit to yes or no.

Concept: Not all data needs to be in state; some can be props or constants.

State should only hold data that changes and affects rendering. Static data or data from parents should be props. Overusing state can cause unnecessary re-renders and complexity.

Result

Components stay efficient and easier to maintain.

Knowing when to use state versus props improves performance and code clarity.

7

Expert

State and props in concurrent rendering

🤔Before reading on: does React always update state and props synchronously? Commit to yes or no.

Concept: React's concurrent mode can delay or interrupt rendering, affecting state and props updates.

React may pause rendering to keep UI responsive. State updates are batched and may not reflect immediately. Props updates depend on parent re-rendering. Understanding this helps avoid bugs with stale data or unexpected renders.

Result

Developers write more resilient components that handle asynchronous updates gracefully.

Knowing React's rendering behavior under the hood prevents subtle bugs in complex apps.

Under the Hood

React keeps a virtual copy of the UI called the virtual DOM. When state or props change, React compares the new virtual DOM with the old one and updates only the changed parts in the real DOM. State is stored inside the component instance, while props come from the parent component's render output.

Why designed this way?

React separates state and props to enforce a clear data flow: parents own data and pass it down as props, while components manage their own local state. This design avoids tangled data dependencies and makes apps easier to reason about and debug.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Parent State  │──────▶│ Parent Render │──────▶│ Child Props   │
│ (memory)      │       │ (creates JSX) │       │ (read-only)   │
└───────────────┘       └───────────────┘       └───────────────┘
       │                                              │
       │                                              ▼
       │                                      ┌───────────────┐
       │                                      │ Child State   │
       │                                      │ (local data)  │
       │                                      └───────────────┘
       ▼
┌───────────────┐
│ React Virtual │
│ DOM Diffing   │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Can a child component change its props directly? Commit to yes or no.

Common Belief: A child component can modify its props to change its behavior.

Reality: Props are read-only inside the child component and cannot be changed directly.

Why it matters: Trying to change props causes bugs and breaks React's one-way data flow, making apps unpredictable.

Quick: Does changing state always update the UI immediately? Commit to yes or no.

Common Belief: State updates happen instantly and synchronously update the UI.

Reality: State updates are asynchronous and batched for performance, so UI updates may be delayed.

Why it matters: Assuming immediate updates can cause bugs when reading state right after setting it.

Quick: Should all data in a component be stored in state? Commit to yes or no.

Common Belief: All data a component uses should be stored in state for flexibility.

Reality: Only data that changes and affects rendering should be in state; static or parent data should be props or constants.

Why it matters: Overusing state leads to unnecessary re-renders and harder-to-maintain code.

Quick: Are props and state interchangeable in React? Commit to yes or no.

Common Belief: Props and state are basically the same and can be used interchangeably.

Reality: Props are external inputs and immutable; state is internal and mutable data owned by the component.

Why it matters: Confusing them leads to poor component design and bugs in data flow.

Expert Zone

1

State updates may be asynchronous and batched, so reading state immediately after setting it may not reflect the new value.

2

Props changes trigger re-renders in child components, but if props are unchanged, React may skip rendering for performance.

3

Using functions to update state (functional updates) avoids bugs when multiple state updates happen quickly.

When NOT to use

Avoid using state for data that does not change or is owned by parents; use props instead. For complex shared state across many components, use state management libraries like Redux or Context API instead of passing props deeply.

Production Patterns

In real apps, state is often lifted up to common ancestors to share data. Props are used to pass data and callbacks down. Components are designed to be pure and rely on props for inputs, using state only for local UI changes.

Connections

Functional Programming

Props are like function arguments, and state is like local variables inside functions.

Understanding props as immutable inputs and state as mutable local data mirrors pure functions versus internal variables, helping grasp React's component design.

Data Flow in Electrical Circuits

Props represent signals flowing from a power source (parent) to components (children), while state is like a capacitor storing charge locally.

Seeing props as signals and state as stored energy clarifies how data moves and is held inside components.

Human Communication

Props are like instructions or messages passed from a manager to an employee, while state is the employee's personal notes and decisions.

This connection shows how clear roles and boundaries in communication improve teamwork, just like in component data flow.

Common Pitfalls

#1 Trying to modify props inside a child component.

Wrong approach:

function Child(props) {
props.name = 'Bob'; // wrong
return {props.name};
}

Correct approach:

function Child(props) {
const [name, setName] = React.useState(props.name);
// change name using state
return {name};
}

Root cause:

Misunderstanding that props are read-only and should not be changed by children.

#2 Storing all data as state, including static props.

Wrong approach:

function Component() {
const [title, setTitle] = React.useState('Hello'); // unnecessary
return {title};
}

Correct approach:

function Component() {
const title = 'Hello'; // simple constant
return {title};
}

Root cause:

Confusing state with any data, leading to overcomplicated components.

#3 Assuming state updates are immediate and reading old state after setState.

Wrong approach:

const [count, setCount] = React.useState(0);
setCount(count + 1);
console.log(count); // still 0, unexpected

Correct approach:

const [count, setCount] = React.useState(0);
setCount(prev => prev + 1);
// useEffect or next render to see updated count

Root cause:

Not knowing state updates are asynchronous and batched.

Key Takeaways

Props are read-only data passed from parent to child components, ensuring a clear and predictable data flow.

State is local, mutable data owned by a component that controls its own changes and triggers UI updates.

Understanding the difference between state and props is essential for building interactive and maintainable React apps.

Proper use of state and props prevents bugs, improves performance, and keeps components reusable and clear.

React's design enforces one-way data flow: parents pass props down, children manage their own state, creating a simple mental model.