Props and State in React

Understand data flow with props and manage local interactive data with state.

Props

Props are read-only inputs passed from parent to child.

tsx

function Greeting({ name }: { name: string }) {
  return <h2>Hello, {name}</h2>;
}

State

State is mutable data managed inside a component.

tsx

import { useState } from 'react';

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

Props vs state

Aspect	Props	State
Owned by	Parent	Current component
Mutability	Read-only	Mutable via setter
Purpose	Configuration/data input	Interactive/local data

Common mistakes

Mutating props directly
Copying props into state unnecessarily
Storing derived values in state

Next, we will handle user events.