React 19 中的 useFormStatus

简介

不知道小伙伴们有没有丝滑过度到 React 19，React 19 不仅增加了好用的 Hook，更使得编译器功能更加强大，使开发者在开发过程中可以尽可能减少不必要的 Hook 使用。接下来，我简单介绍一下其中一个非常好用的 Hook，useFormStatus 。

useFormStatus

useFormStatus 返回了几个参数，我们先从参数入手，就可以进一步了解其 Hook 的作用。

const { pending, data, method, action } = useFormStatus();

第一个参数是 pending, 布尔类型，用来告知表单是否在提交状态。

第二个参数 data, 包含了表单的数据，这个参数是实现了表单 FormData object。具体可以参考 MDN 文档来看 FormData 类型。

第三个参数是 method，也就是我们常见的 post 和 get 请求方式。

第四个参数是 action，表单默认会有 action prop，如果在写组件时，有设定 action 的值，在 Hook 中可以获得。

至此，我们基本大致了解其 Hook 的功能，可以获取表单的请求状态，并可以获得请求数据，从而控制表单的显示或者数据的加载和拦截。

总结

这大大优化了表单请求时，页面交互的丝滑和流畅。并且可以更方便开发者对于表单数据的控制。虽然很多时候，我们会使用 UI 库，从而避免了表单底层开发，但是在有些情况下，当业务逻辑可能无法从 UI 中实现，我们需要从底层开始，实现表单的提交功能，那么，这时候该 Hook 就可以大大提升我们的开发效率。