Mental model

Ratatui Kit looks like declarative UI, but at runtime it is still a render loop inside a terminal. You do not need the full API up front. Start with this main line:

declare the UI wanted for this frame
        ↓
runtime reuses component instances from the previous frame
        ↓
state changes wake the next frame
        ↓
ratatui draws components into the terminal buffer

Four names will appear repeatedly:

• Element is the declaration rebuilt every frame.
• Component is the runtime instance that persists.
• Hooks are attached to component instances and store state by call order.
• Writing to State wakes the waker and lets the render loop enter the next frame.

event / state change
        ↓
render loop wakes
        ↓
component update runs hooks
        ↓
element tree reconciles components
        ↓
draw writes ratatui buffer

This explains two rules:

1. Hook call order must be stable. Do not put use_state, use_effect, or use_event_handler inside conditional branches or loops.
2. UI changes should go through a channel that can wake the runtime, such as State, AtomState, use_future, or terminal events.

How much to read now

You do not need to master the reconciliation algorithm, layout dispatch, or internal poll_change yet. As you continue through the tutorials, add concepts in this order:

1. For interaction, read the counter tutorial and the Hooks reference.
2. For modals, inputs, or shortcuts, read the input isolation tutorial and the input layer reference.
3. For multi-page applications, read the Router tutorial and the routing reference.
4. When you need to fully understand why state is retained, read the component model.