If upgrading from pre-18 versions, these changes accumulated and are now mandatory:

| Change | Introduced | React 19 Status |

|--------|------------|-----------------|

| createRoot / hydrateRoot | React 18 | Required (ReactDOM.render removed) |

| Concurrent rendering | React 18 | Foundation for all R19 features |

| Automatic batching | React 18 | Default behavior |

| useId, useSyncExternalStore | React 18 | Stable, commonly used |

| Hooks (no classes for new code) | React 16.8 | Only path for new features |

| createContext (not legacy) | React 16.3 | Required (legacy Context removed) |

| Error Boundaries | React 16 | Now with better error callbacks |

Migration path: Upgrade to React 18.3 first (shows deprecation warnings), then to 19.

React 19 represents fundamental shifts in how to think about React:

| Old Thinking | New Thinking |

|--------------|--------------|

| Client-side by default | Server-first (RSC default) |

| Manual memoization | Compiler handles it |

| useEffect for data | async Server Components |

| useState for forms | Form Actions |

| Loading state booleans | Suspense boundaries |

| Optimize everything | Write correct code, compiler optimizes |

See [references/paradigm-shifts.md](./references/paradigm-shifts.md) for the mental model changes.

See [references/anti-patterns.md](./references/anti-patterns.md) for what to stop doing.

| Feature | React 18 | React 19+ |

|---------|----------|-----------|

| Memoization | Manual (useMemo, useCallback, memo) | React Compiler (automatic) or manual |

| Forward refs | forwardRef() wrapper | ref as regular prop |

| Context provider | | |

| Form state | Custom with useState | useActionState hook |

| Optimistic updates | Manual state management | useOptimistic hook |

| Read promises | Not possible in render | use() hook |

| Conditional context | Not possible | use(Context) after conditionals |

| Form pending state | Manual tracking | useFormStatus hook |

| Ref cleanup | Pass null on unmount | Return cleanup function |

| Document metadata | react-helmet or manual | Native

{post.title}

{post.content}

);

}

```

```tsx

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';

function App() {

// DNS prefetch

prefetchDNS('https://api.example.com');

// Establish connection early

preconnect('https://fonts.googleapis.com');

// Preload resources

preload('https://example.com/font.woff2', { as: 'font' });

preload('/hero.jpg', { as: 'image' });

// Load and execute script eagerly

preinit('https://example.com/analytics.js', { as: 'script' });

return

```tsx

// precedence controls insertion order and deduplication

function Component() {

return (

<>

);

}

// React ensures stylesheets load before Suspense boundary reveals

}>

```

React 19 adds full support for Custom Elements (Web Components).

```tsx

// Props matching element properties are assigned as properties

// Others are assigned as attributes

stringAttr="hello" // Attribute (string)

complexProp={{ foo: 'bar' }} // Property (object)

onCustomEvent={handleEvent} // Property (function)

/>

```

Client-side: React checks if a property exists on the element instance. If yes, assigns as property; otherwise, as attribute.

Server-side (SSR): Primitive types (string, number) render as attributes. Objects, functions, symbols are omitted from HTML.

```tsx

// Define custom element

class MyElement extends HTMLElement {

constructor() {

super();

this.data = undefined; // React will assign to this property

}

connectedCallback() {

this.textContent = JSON.stringify(this.data);

}

}

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

// Use in React

```

Better Error Messages

React 19 shows a single error with a diff instead of multiple vague errors:

```

Uncaught Error: Hydration failed because the server rendered HTML

didn't match the client.

+ Client

• Server

```

Third-Party Script Compatibility

React 19 gracefully handles elements inserted by browser extensions or third-party scripts:

• Unexpected tags in and are skipped (no mismatch errors)
• Stylesheets from extensions are preserved during re-renders
• No need to add suppressHydrationWarning for extension-injected content

| Removed | Migration |

|---------|-----------|

| ReactDOM.render() | createRoot().render() |

| ReactDOM.hydrate() | hydrateRoot() |

| unmountComponentAtNode() | root.unmount() |

| ReactDOM.findDOMNode() | Use refs |

| propTypes | TypeScript or remove |

| defaultProps (functions) | ES6 default parameters |

| String refs | Callback refs or useRef |

| Legacy Context | createContext |

| React.createFactory | JSX |

| react-dom/test-utils | act from 'react' |

See [references/deprecations.md](./references/deprecations.md) for migration guides.

```tsx

// useRef requires argument

const ref = useRef(null); // Required

const ref = useRef(); // Error in React 19

// Ref callbacks must not return values (except cleanup)