From f135fe8daaf2e25bfa7616af2a1534f92ebe5499 Mon Sep 17 00:00:00 2001 From: adi-rajput Date: Thu, 12 Mar 2026 00:46:30 +0530 Subject: [PATCH 1/2] docs: add Async React Hooks section and group related hooks --- src/content/reference/react/hooks.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md index ab48b644b7f..7f78071c13b 100644 --- a/src/content/reference/react/hooks.md +++ b/src/content/reference/react/hooks.md @@ -104,11 +104,28 @@ Sometimes, you can't skip re-rendering because the screen actually needs to upda To prioritize rendering, use one of these Hooks: -- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it. - [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first. --- +## Async React Hooks {/*async-react-hooks*/} + +Async React lets you build responsive apps by running asynchronous work inside Actions. These hooks help manage UI updates during asynchronous operations and allow React to keep the interface responsive while work is being processed. + +### useTransition {/*usetransition*/} + +Lets you mark state updates as non-blocking so the UI stays responsive while they run. + +### useActionState {/*useactionstate*/} + +Lets you update state from an Action, commonly used for form submissions or async reducers. + +### useOptimistic {/*useoptimistic*/} + +Lets you show a temporary UI state while an Action is running. + +--- + ## Other Hooks {/*other-hooks*/} These Hooks are mostly useful to library authors and aren't commonly used in the application code. @@ -116,7 +133,6 @@ These Hooks are mostly useful to library authors and aren't commonly used in the - [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook. - [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs. - [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store. -* [`useActionState`](/reference/react/useActionState) allows you to manage state of actions. --- From 93343141b8afe7e0d409cca9b7de9a774ae3980c Mon Sep 17 00:00:00 2001 From: adi-rajput Date: Thu, 12 Mar 2026 00:49:48 +0530 Subject: [PATCH 2/2] docs: align Async React Hooks section formatting with hooks page --- src/content/reference/react/hooks.md | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md index 7f78071c13b..d0dcfc586d7 100644 --- a/src/content/reference/react/hooks.md +++ b/src/content/reference/react/hooks.md @@ -112,17 +112,11 @@ To prioritize rendering, use one of these Hooks: Async React lets you build responsive apps by running asynchronous work inside Actions. These hooks help manage UI updates during asynchronous operations and allow React to keep the interface responsive while work is being processed. -### useTransition {/*usetransition*/} +To manage asynchronous updates, use one of these Hooks: -Lets you mark state updates as non-blocking so the UI stays responsive while they run. - -### useActionState {/*useactionstate*/} - -Lets you update state from an Action, commonly used for form submissions or async reducers. - -### useOptimistic {/*useoptimistic*/} - -Lets you show a temporary UI state while an Action is running. +- [`useTransition`](/reference/react/useTransition) lets you mark state updates as non-blocking so the UI stays responsive while they run. +- [`useActionState`](/reference/react/useActionState) lets you update state from an Action, commonly used for form submissions or async reducers. +- [`useOptimistic`](/reference/react/useOptimistic) lets you show a temporary UI state while an Action is running. ---