react 19.x

Complete instructions

React 19 component behavior

Read the installed React and renderer versions before using version-specific APIs. Keep react and react-dom on matching versions. The verification fixture targets the existing React DOM line's 19.2.8 pair; APIs introduced in later minors need their own compatibility check.

State, identity and closures

Keep rendering pure. Call hooks at component or custom-hook top level; React's use API has separate rules and is not a reason to call other hooks conditionally. State is a snapshot for a render. Use a functional update when the next value depends on the previous value, particularly in timers or multiple queued updates:

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  function incrementTwice() {
    setCount((previous) => previous + 1);
    setCount((previous) => previous + 1);
  }

  return <button onClick={incrementTwice}>{count}</button>;
}

Replace state objects rather than mutate them. Keys identify sibling instances; use stable data identifiers rather than positions when items can move. Changing a key intentionally resets that component's state. Derive values during render instead of copying props into state or effects unless independent state is needed.

Synchronize with external systems

An effect connects the component to an external system. Include every reactive value used by the effect, and mirror setup with cleanup. Development StrictMode can run setup, cleanup and setup again; do not suppress that cycle with a ref to hide missing cleanup.

import { useEffect } from "react";

export function Connection({ endpoint }: { endpoint: string }) {
  useEffect(() => {
    const controller = new AbortController();
    let active = true;

    async function connect() {
      try {
        const response = await fetch(endpoint, { signal: controller.signal });
        if (!response.ok) throw new Error(`Request failed: ${response.status}`);
        const result = await response.text();
        if (!active) return;
        console.log(result);
      } catch (error) {
        if (controller.signal.aborted) return;
        console.error(error);
      }
    }

    void connect();

    return () => {
      active = false;
      controller.abort();
    };
  }, [endpoint]);

  return null;
}

Use the application's query/cache layer when it already owns fetching and deduplication. An effect example does not replace cache, routing or server data loading. Use event handlers for user actions rather than an effect triggered by an artificial state flag.

Forms and nonurgent updates

useActionState receives the previous state before the action arguments. Validate FormData at the trust boundary and render the returned state. useFormStatus reads the status of a parent form, so put the submit-status component inside that form.

import { useActionState } from "react";
import { useFormStatus } from "react-dom";

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>Save</button>;
}

export function NameForm() {
  const [message, save] = useActionState(
    async (_previous: string, data: FormData) => {
      const value = data.get("name");
      if (typeof value !== "string" || !value.trim()) return "Enter a name";
      return `Saved ${value.trim()}`;
    },
    "",
  );

  return (
    <form action={save}>
      <input name="name" defaultValue="Ada" />
      <SubmitButton />
      <output>{message}</output>
    </form>
  );
}

Function actions reset uncontrolled fields after successful submission. Return expected validation failures as state; use error boundaries for thrown errors. Authentication, persistence and Server Action transport remain application or framework responsibilities.

Transitions mark updates that can yield while urgent interactions proceed. Keep controlled text-input state urgent. In React 19, state updates after an await may need another startTransition call; consult the installed-version documentation. Do not treat useTransition as cancellation or a general request-ordering solution.

Renderer and server boundaries

Use react-dom/client for browser roots and React Native's renderer for native UI. Hooks do not run in a standalone element-construction script; exercise state and effects through a renderer. use can read a cached promise from a compatible framework or library, not a new promise created during every render. Server Components and "use server" require framework integration; do not add those directives to ordinary client modules to create a server endpoint.

For changes to behavior, test a visible state update, cleanup on unmount and the relevant form/error path. The DOM fixture also checks hydration of matching server markup; it does not establish browser layout, accessibility or framework SSR.

Sources

• State as a snapshot
• Queued state updates
• Effects and cleanup
• React 19 release
• useActionState
• useTransition