React 19 Cheat Sheet

This is the content transformed from Kent C. Dodds's React 19 Cheat Sheet.

Custom Element Support

React now fully supports custom elements and handles properties/attributes consistently. You can easily define and use custom elements within your React components.

Improved Third-Party Script Compatibility

React 19 handles unexpected tags in <head> and <body> during hydration, improving compatibility with third-party scripts. This prevents hydration errors caused by extra or unexpected elements.

React Server Components

Server-rendered components now execute at build time or per request, optimizing load time and reducing client-side rendering needs.

Actions and useActionState

Async functions can now automatically handle form submissions, error states, and optimistic updates. The useActionState hook provides management of form states, making your forms more resilient in degraded experiences.

Async Script Support

React 19 enables rendering of async scripts anywhere in your component tree, which are automatically deduplicated, preventing multiple script loads.

class MyElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML =
      "<p>Hello from a Custom Element</p>";
  }
}

customElements.define(
  "my-element",
  MyElement,
);

// Usage in React
export default function App() {
  return <my-element />;
}