React 19 introduces powerful new primitives for handling async data, optimistic updates, and form state. The use() hook, useOptimistic, and useFormStatus represent a shift toward native React patterns for scenarios previously solved by third-party libraries.
0 / 5 completed
1 / 5
What does the use() hook allow that was not possible with existing hooks?
The use() hook is unique because it can be called inside loops and conditionals (unlike regular hooks). When passed a Promise, it suspends the component until the Promise resolves, integrating seamlessly with Suspense without boilerplate.
2 / 5
You pass a pending Promise directly to use(promise). What must exist in the component tree for this to work correctly?
When use() receives an unresolved Promise, it throws a Promise (suspends) up the tree. A Suspense boundary catches this and renders the fallback until the Promise resolves, at which point the component re-renders.
3 / 5
What is useOptimistic designed for?
useOptimistic lets you display an optimistic (predicted) UI state instantly when a user triggers an action, providing a snappy feel. Once the real async result arrives, React reconciles — reverting if it failed or confirming if it succeeded.
4 / 5
A component calls useFormStatus(). What data does it provide, and from where?
useFormStatus() is a hook that must be used inside a component rendered within a <form>. It reads the submission state (pending, data, method, action) from the parent form via React's context, enabling submit-button disabling without prop drilling.
5 / 5
In React 19 form actions, you pass an async function to a form's action prop. How does React handle errors thrown by that function?
React 19 form actions integrate with the error boundary system. If an async action function throws, React propagates the error to the nearest ErrorBoundary and also resets the form's pending state, so the UI does not get stuck in a loading state.