You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/blog/2024/04/25/react-19.md
+7-7
Original file line number
Diff line number
Diff line change
@@ -115,7 +115,7 @@ Actions automatically manage submitting data for you:
115
115
116
116
</Note>
117
117
118
-
Building on top of Actions, we're also introducing[`<form>` Actions](#form-actions) to manage forms automatically, [`useOptimistic`](#new-hook-optimistic-updates) to manage optimistic updates, and new hooks [`useActionState`](#new-hook-useactionstate), [`useFormStatus`](#new-hook-useformstatus) to support the common cases for Actions and Forms.
118
+
Building on top of Actions, React 19 introduces[`useOptimistic`](#new-hook-optimistic-updates) to manage optimistic updates, and a new hook [`React.useActionState`](#new-hook-useactionstate) to handle common cases for Actions. In `react-dom` we're adding [`<form>` Actions](#form-actions) to manage forms automatically and [`useFormStatus`](#new-hook-useformstatus) to support the common cases for Actions in forms.
119
119
120
120
In React 19, the above example can be simplified to:
121
121
@@ -173,19 +173,19 @@ See [#28491](https://github.com/facebook/react/pull/28491) for more info.
173
173
174
174
For more information, see the docs for [`useActionState`](/reference/react/useActionState).
Actions are also integrated with React 19's new `<form>` features. We've added support for passing functions as the `action` and `formAction` props of `<form>`, `<input>`, and `<button>` elements to automatically submit forms with Actions:
178
+
Actions are also integrated with React 19's new `<form>` features for `react-dom`. We've added support for passing functions as the `action` and `formAction` props of `<form>`, `<input>`, and `<button>` elements to automatically submit forms with Actions:
179
179
180
180
```js [[1,1,"actionFunction"]]
181
181
<form action={actionFunction}>
182
182
```
183
183
184
184
When a `<form>` Action succeeds, React will automatically reset the form for uncontrolled components. If you need to reset the `<form>` manually, you can call the new `requestFormReset` React DOM API.
185
185
186
-
For more information, see the docs for [`<form>`](/reference/react-dom/components/form), [`<input>`](/reference/react-dom/components/input), and [`<button>`](/reference/react-dom/components/button).
186
+
For more information, see the `react-dom`docs for [`<form>`](/reference/react-dom/components/form), [`<input>`](/reference/react-dom/components/input), and [`<button>`](/reference/react-dom/components/button).
187
187
188
-
### New hook: `useFormStatus` {/*new-hook-useformstatus*/}
188
+
### React DOM: New hook: `useFormStatus` {/*new-hook-useformstatus*/}
189
189
190
190
In design systems, it's common to write design components that need access to information about the `<form>` they're in, without drilling props down to the component. This can be done via Context, but to make the common case easier, we've added a new hook `useFormStatus`:
191
191
@@ -198,7 +198,7 @@ function DesignButton() {
198
198
199
199
`useFormStatus` reads the status of the parent `<form>` as if the form was a Context provider.
200
200
201
-
For more information, see the docs for [`useFormStatus`](/reference/react-dom/hooks/useFormStatus).
201
+
For more information, see the `react-dom`docs for [`useFormStatus`](/reference/react-dom/hooks/useFormStatus).
202
202
203
203
### New hook: `useOptimistic` {/*new-hook-optimistic-updates*/}
204
204
@@ -366,7 +366,7 @@ New function components will no longer need `forwardRef`, and we will be publish
366
366
367
367
### Diffs for hydration errors {/*diffs-for-hydration-errors*/}
368
368
369
-
We also improved error reporting for hydration errors. For example, instead of logging multiple errors in DEV without any information about the mismatch:
369
+
We also improved error reporting for hydration errors in `react-dom`. For example, instead of logging multiple errors in DEV without any information about the mismatch:
0 commit comments