How to Use Jotai for Atomic State in React
Set up Jotai in React. Create atoms with the atom function, read and update them with useAtom, and build derived values that stay in sync.
Build modern UIs with React
Set up Jotai in React. Create atoms with the atom function, read and update them with useAtom, and build derived values that stay in sync.
Build an accessible React modal with createPortal, a dialog role, focus management, and Escape to close. See the full pattern in steps.
Build accessible React tabs with the ARIA tabs pattern. Add roving tabindex, arrow key navigation, and connected tab panels.
Build flexible React component APIs with the compound components pattern. Share state through context and let users arrange the parts.
Server Components render on the server, keep heavy code and secrets off the browser, and pair with Client Components for the interactive parts of a page.
The 'use client' directive marks a module and its dependencies as client code, creating the boundary between server and browser in a React Server Components app.
The 'use server' directive marks async functions that client code can call, sending serialized arguments to the server and returning a serialized result.
The use API reads the resolved value of a Promise during render, or a context value from anywhere in a component, and pairs with Suspense and error boundaries.
Streaming SSR sends the page as a stream of HTML, delivering the shell first and the rest as data finishes, with Suspense boundaries deciding the order.
useOptimistic shows an instant, temporary UI while a mutation runs, then converges to the real result when the action finishes.
The Activity component hides a part of the UI without unmounting it, keeping its state and DOM while its Effects are cleaned up until it becomes visible again.
The ViewTransition component animates a component tree when it enters, exits, updates, or is shared between two positions, using the browser's View Transition API.