React Key Concepts - Second Edition

9

Handling User Input & Forms with Form Actions

Learning Objectives

By the end of this chapter, you will be able to do the following:

• Describe the purpose of React form actions
• Build and use custom form actions to handle form submissions
• Use the useActionState() Hook to manage form-dependent state
• Render a pending UI during submission via the useFormStatus() Hook
• Perform optimistic state updates with the useOptimistic() Hook
• Implement both synchronous and asynchronous actions

Introduction

In Chapter 4, Working with Events and State, you learned how to handle form submissions in React applications. And while there is absolutely nothing wrong with the approach shown there—indeed, it’s arguably the approach you’ll find in the majority of React ...