❯ Server Components & React 19

Roughly 15% of a typical loop — and 15% of the mock exam here.

Server Components are the highest-signal React 19 topic in current loops: most candidates met them through a framework’s folder conventions, and interviewers probe whether you know the actual model underneath.

Server vs client components

Server components render ahead of time — at build time or per request — in an environment separate from the browser. Their code never ships in the bundle; only their rendered output does.

• Server components can be async, read a database or the filesystem directly, and hold secrets. They cannot use useState, useEffect, event handlers, or browser APIs — the component itself never reaches the client, so nothing interactive survives.
• Client components own interactivity. They still server-render to HTML and then hydrate — “client” describes where the code becomes interactive, not the only place it runs.
• Trap answer: “RSC replaces SSR.” False. SSR turns client components into first-paint HTML; RSC is a separate layer of components that never hydrate at all; the two compose.

Directives mark boundaries, not files

The rule that resolves most directive confusion: 'use client' and 'use server' are boundary markers on the module graph, not per-file execution labels.

• 'use client' at the top of a file marks where the import graph crosses from server to client. Everything that file imports becomes client code transitively — no further directives needed.
• Most components carry no directive at all; the same component definition can render as server or client depending on which side of a boundary imports it.
• 'use server' does not mark a server component — it marks Server Functions, server-side functions callable from the client. There is no directive for server components; that is the trap.
• The boundary follows imports, not the render tree: a client component can still render server-rendered children it receives via props.

The serialization boundary

Props crossing from server to client travel in a serialized payload, so they must be serializable: primitives, plain objects and arrays, Map, Set, Date, FormData, JSX, Promises, and Server Functions. Regular functions, classes, and class instances do not cross.

• The classic failure: passing onClick from a server component into a client component. Fix: define the handler inside the client component, or pass a Server Function.
• Promises are legal props — start fetching on the server, pass the promise down, and read it in the client with use(promise), which suspends until it resolves. Unlike a hook, use may be called conditionally, but it does not support promises created during render.

Actions and the React 19 hooks

React 19 made async mutations first-class. A <form> now accepts a function as its action, and React wraps the submission in a transition automatically, managing pending state, errors, and optimistic updates.

const [state, submitAction, isPending] = useActionState(
  async (prevState, formData) => save(formData.get('name')),
  null,
);

• useActionState returns the latest result, an action to hand a form, and isPending. The callback receives previous state first, then the payload. With Server Functions it can respond before hydration completes — progressive enhancement for free.
• useOptimistic shows the expected value while an action is pending and reverts automatically if it fails.
• Terminology check: a Server Function called inside an action is a Server Action. Always treat its arguments as untrusted input and authorize every mutation on the server.

React 19 changes and rendering models

• ref is a regular prop on function components; forwardRef is deprecated, with a codemod. Ref callbacks may return cleanup functions, and <Context> renders directly as a provider.
• SSG renders HTML once at build, SSR renders per request, and streaming sends HTML in chunks as Suspense boundaries resolve. RSC composes with all three rather than replacing any of them.
• The precise bundle-size claim: RSC shrinks the bundle only for code that stays server-only. A markdown renderer used in a server component ships zero client JS; put 'use client' at the root and the benefit disappears.