Project 27: To-Do List UI

React Engineer

Builds on these lessons

19 Whats New Compiler Modern Rendering Best Practices

Step 1 of 3

Project

React 19: Actions & the use Hook

Add a comment noting React 19's biggest addition: Actions — passing an async function directly to a form's action prop, with pending state handled for you. The new use() hook similarly lets you read a promise or context value directly during render, in places a hook couldn't be called before.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

// React 19: Actions let a <form action={asyncFunction}> handle submission with
// pending state managed for you. The new use() hook reads a promise or context
// value directly during render, including inside conditionals — somewhere a
// regular hook couldn't be called before.

export default function TodoList() {
  return <div>To-Do List</div>;
}

← Previous Next →