State vs props comparison in React - When to Use Which

The Big Idea

Discover how React's state and props save you from messy, error-prone code and make your app smart and responsive!

The Scenario

Imagine building a web app where you have to manually update every piece of information on the screen whenever something changes, like user input or data from a server.

You try to pass data between parts of your app by copying and pasting values everywhere.

The Problem

This manual way is confusing and slow. You might forget to update some parts, causing bugs.

It's hard to keep track of where data came from or who can change it.

The Solution

React's state and props help organize data flow clearly.

State holds data that can change inside a component.

Props pass data from parent to child components safely and read-only.

This makes your app easier to build, understand, and fix.

Before vs After

✗ Before

function updateName(name) {
  document.getElementById('name').textContent = name;
  document.getElementById('greeting').textContent = 'Hello, ' + name;
}

✓ After

import React, { useState } from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

function App() {
  const [name, setName] = useState('Alice');
  return <Greeting name={name} />;
}

What It Enables

You can build interactive apps where data flows clearly and updates automatically when things change.

Real Life Example

Think of a shopping cart: state tracks items you add or remove, while props pass the cart details to different parts of the page to show totals or item lists.

Key Takeaways

State holds data that can change inside a component.

Props pass data from parent to child components and cannot be changed by the child.

Using state and props keeps your app organized and easy to update.