# Components, State & Events

**Track:** The Full-Stack Substrate — AI-Native Full-Stack Development — complete (30)
**Framework / surface:** web dev (React 19 / UI architecture)
**Level:** Beginner
**Prerequisites:** TypeScript for AI-Native Builders

**In one line:** Build interfaces as components whose rendered output changes in response to state and events.

## Theory, aesthetics & inspiration

React — built at Facebook by Jordan Walke and open-sourced in 2013 — popularized the mental model this tutorial actually teaches: an interface is a function of state. Decompose the UI into components that receive data and return rendered output; hold state for what changes over time; let events — clicks, keystrokes, submissions — drive state transitions, and let the framework re-render what follows. The critical design question is where state belongs: shared state lives at a shared boundary, and a value derivable from existing state should be derived, not duplicated, because a second copy is a standing invitation to contradiction. AI-native interfaces expand the state space rather than change the model — a stream of partial output, a tool call awaiting approval, a background agent mid-task are all just conditions to render. Understanding components and state is what lets you make agent behavior visible instead of hiding a working system behind a spinner.

**Builder question:** What are the smallest pieces of state required to render every meaningful condition of this interface?