State & Event Handling

While props let you pass data down, state lets a component remember information and change it over time. Combined with event handlers, state makes your UI interactive. This lesson covers useState, events, forms, controlled inputs, lifting state up, and immutable updates.

---

What Is State?

State is data that a component owns and can change over time. When state changes, React automatically re-renders the component.

Props	State
Passed from parent	Owned by the component
Read-only	Can be updated
Triggers re-render when changed	Triggers re-render when changed

---

useState

The useState hook lets you add state to a function component:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

How useState Works

const [value, setValue] = useState(initialValue);
         │        │                    │
         │        │                    └─ Initial value (used on first render only)
         │        └─ Function to update the value
         └─ Current value

Multiple State Variables