Mini app: optimistic to-dos with a live title
Build a to-do list with a React 19 form action. The form has an input name="text" (id new-todo) and a submit button.
Keep confirmed to-dos in state (start with ["Learn Actions"]). Render each to-do as an <li> inside <ul id="todos">.
When the form is submitted with text: add it optimistically with useOptimistic; the optimistic <li> gets className="pending". Then await fakeSave(text) (300 ms) and add it to the real state.
When the text is empty or only spaces, don't add anything and show <p id="error">Write something first.</p>. Clear the error on the next successful submit.
Render <title> with the number of confirmed to-dos: Todos (1), Todos (2)… (one string child!).
What Check tests
- The tab title starts as
Todos (1) - An empty submit shows
Write something first.and adds nothing - A new to-do appears at once with class
pending - After saving, it is confirmed (no
pending), the box is empty, the error is gone and the title saysTodos (2) - The app uses a form action and
useOptimistic
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.