new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

React · API reference · all subjects

server components & actions

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Server Components in React 18

Server Components is an upcoming feature that allows developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering. Server Components is not inherently coupled to Concurrent React but is designed to work best with concurrent features like Suspense and streaming server rendering. It is still experimental in React 18.

React Server Components and Canary adoption

React Server Components conventions have been finalized and are ready for framework adoption, but support cannot be released in a stable React version yet because framework-only features like asset loading are still being worked on with expected breaking changes. Frameworks can adopt them by shipping a pinned Canary version of React and enforcing resolution of react and react-dom to that pinned version.

Activity component for SSR optimizations

Activity is a component that can render content with mode="hidden" or mode="visible" for server-side rendering optimizations. When mode="hidden", the content is not included in the SSR response and React schedules a client render while prioritizing visible content. When mode="visible", React de-prioritizes hydration similar to Suspense.

Streaming data from server to client with use

Data can be streamed from the server to the client by passing a Promise as a prop from a Server Component to a Client Component. The Client Component then takes the Promise it received as a prop and passes it to use. This allows the Client Component to read the value from the Promise that was initially created by the Server Component.

use caveat with Server Components and Promise in context

When using use with Promises in context with Server Components, refetching the Promise requires refetching the Server Component that sets the Promise in context. Avoid setting the Promise in context high in the tree, since that would refetch large parts of the app unnecessarily.

Give your agent this brain