Props & State

Props and state are the two sources of data in a React component. Understanding both — and understanding why they are fundamentally different — is the foundation for every React pattern that follows.

Props: Inputs to a Component

Props (short for “properties”) are the arguments you pass to a component when you render it. They flow from parent to child, and a component must never modify its own props.

type ButtonProps = {
  label: string;
  variant?: "primary" | "secondary";
  onClick: () => void;
};

function Button({ label, variant = "primary", onClick }: ButtonProps) {
  return (
    <button className={`btn btn--${variant}`} onClick={onClick}>
      {label}
    </button>
  );
}

// Usage
<Button label="Save" onClick={handleSave} />
<Button label="Cancel" variant="secondary" onClick={handleCancel} />

Destructuring props directly in the function signature ({ label, variant = "primary", onClick }) is idiomatic React. The = "primary" syntax provides a default value for the optional variant prop.

Passing Any Type as a Prop

Props are not limited to strings and numbers. You can pass functions, objects, arrays, other React elements, or even components.

type CardProps = {
  title: string;
  children: React.ReactNode; // anything React can render
  renderFooter?: () => React.ReactNode; // render prop pattern
};

function Card({ title, children, renderFooter }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card__body">{children}</div>
      {renderFooter && <footer>{renderFooter()}</footer>}
    </div>
  );
}

The special children prop receives whatever is placed between a component’s opening and closing tags.

State: Memory Inside a Component

State is data that belongs to a component and can change over time. When state changes, React re-renders the component to reflect the new value. Props cannot change during a component’s lifetime (from that component’s perspective); state can.

// Without state — the count variable resets on every render
function BrokenCounter() {
  let count = 0;
  return <button onClick={() => count++}>{count}</button>; // never updates
}

// With state — React tracks the value between renders
import { useState } from "react";

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

The broken version increments a local variable, but since React has no way to know it changed, it never re-renders. State hands that responsibility to React.

One-Way Data Flow

graph TD
  Parent["Parent Component\n(owns state)"]
  Child1["Child A\n(receives props)"]
  Child2["Child B\n(receives props)"]
  GrandChild["Grandchild\n(receives props)"]

  Parent -- "props" --> Child1
  Parent -- "props" --> Child2
  Child1 -- "props" --> GrandChild
  GrandChild -- "callback prop (event)" --> Child1
  Child1 -- "calls handler" --> Parent

Data flows down through props. Events and callbacks flow up — a child calls a function passed to it as a prop, which triggers a state update in the parent, which re-renders the tree. This single direction makes data easy to trace and debug.

Props vs State: How to Decide

Further Learning

Search these terms to go deeper:

• “Thinking in React react.dev” — the canonical guide to identifying state, where to put it, and one-way data flow
• “Kent C. Dodds application state management” — patterns for deciding where state should live
• “React children prop patterns” — everything you can do with the children prop
• “TypeScript React props typing guide” — exhaustive patterns for typing component props
• “Lifting state up react.dev” — the official tutorial on sharing state between siblings

Props & State

React components get their data from two places: props (info passed in from outside) and state (info the component remembers itself). Knowing which to use is the foundation of React.

Props: info passed in

Props are like function arguments. A parent component passes them down to a child, and the child just uses them. Think of a button that’s told its label and what to do when clicked:

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>
}

// used like:
<Button label="Save" onClick={handleSave} />

You can give optional props a default value right in the signature:

function Button({ label, variant = 'primary' }) { ... }

State: info a component remembers

State is data that belongs to a component and can change over time — like a counter’s number or whether a menu is open. When state changes, React automatically re-draws the component to show the new value.

import { useState } from 'react'

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

Why not just a normal variable? Because React wouldn’t know it changed. State is how you tell React “this changed — please re-draw.”

Data flows one direction: down

A key React idea: data flows down from parent to child via props. When a child needs to tell the parent something happened (like a click), the parent hands it a function to call:

// parent passes a function down; child calls it up
<Button label="Delete" onClick={() => removeItem(id)} />

Down = data (props). Up = events (callbacks). This one-way flow makes apps easy to follow.

Props or state? A quick guide

In one sentence

Props are read-only data passed into a component from its parent; state is data a component owns and can change (which re-draws it) — data flows down as props, events flow up as callbacks.

Want to go deeper?

Switch to Expert mode above for the children prop, render props, and the full props-vs-state decision table.