🚦 Concurrent Rendering

Concurrent rendering is React's upgraded rendering engine that

• makes UI updates interruptible and prioritized — meaning React doesn't have to finish one render before it can start another.
• If something more important pops up (like user input or animations), React can pause, adjust, or even abandon a render and re-do it with fresher data.
• Prevents UI Jank
• useTransition: marks updates as non-urgent
• startTransition: wraps low-priority updates
• useDeferredValue: lets React delay some parts of the UI
• Suspense: coordinates loading with fallback UI

🚏 React’s server APIs

• rendering components on the server before sending them to the client
• Core Server API: renderToPipeableStream for streaming content to browser.

import { renderToPipeableStream } from 'react-dom/server';

const stream = renderToPipeableStream(<App />, {
  onShellReady() {
    stream.pipe(response); // send HTML chunks as they become ready
  }
});

Once the server sends down HTML, the browser uses hydrateRoot to attach React’s interactivity to that markup.

You can suppress specific mismatches with suppressHydrationWarning. Use these to send logs to services like Sentry, or trigger custom recovery flows.

hydrateRoot(domNode, <App />, {
  onCaughtError(error, info) {
    // Recoverable error caught by an Error Boundary
  },
  onUncaughtError(error, info) {
    // Error that wasn’t caught
  },
  onRecoverableError(error, info) {
    // React recovered automatically
  }
});