A component function runs from top to bottom every time React 7,897 renders it, and every local variable it declares disappears when it returns. State is the memory that survives: a value React keeps outside the function, hands back on the next call, and watches for changes. Events are what change it. Together they are the whole of React's interactivity model — no two-way binding, no observables, no digest cycle.
The loop always runs in the same order. React calls your component, gets a description of the UI back, and commits the difference to the DOM. The browser delivers an event, your handler calls a setter, React schedules another call to the same component, and the loop repeats with the new value.
Everything here is built on useState. State that many components share moves to context in Context and Reducers, and state with complicated transitions moves to useReducer in useReducer, but both refine the same loop. Getting the loop right — when a value is stale, when a re-render happens, what an event object actually is — keeps the rest of React predictable.