React v18.0

Summary

React 18 introduces a new concurrent renderer (opt-in via concurrent features) and several ergonomics and performance improvements: automatic batching across event types, transition APIs (startTransition/useTransition) to mark non-urgent updates, expanded Suspense capabilities (including streaming SSR support), and groundwork for Server Components. Concurrent rendering makes renders interruptible, enabling background preparation of UI and smoother interactions.

Key Points

• Concurrent rendering (behind the scenes)
  • Opt-in: enabled only where you use concurrent features (transitions, Suspense streaming, etc.).
  • Rendering is interruptible and may be paused, resumed, or abandoned; DOM mutations are applied after the tree is evaluated.
• Automatic batching
  • State updates are now batched across timeouts, promises, native handlers, and React events, reducing unnecessary re-renders.
• Transitions
  • New APIs: startTransition and useTransition to mark non-urgent updates (e.g., navigating or rendering large lists) so urgent input remains responsive.
  • Interrupted transitions discard stale work and render the latest state.
• Suspense and server rendering
  • Streaming SSR with Suspense is supported; Suspense is recommended within opinionated frameworks (Next.js, Remix, Relay, Hydrogen) for data fetching.
• Server Components
  • Still experimental; an initial Server Components release is planned in a future minor 18.x release.
• Migration and compatibility
  • Most components should work without changes, but concurrent rendering can surface subtle bugs.
  • Use StrictMode in development to surface concurrency-related issues (extra warnings and double-invocations for idempotence).
  • Libraries and frameworks are expected to adopt concurrent-safe patterns (e.g., routers wrapping navigations in startTransition).

Practical Upgrade Guidance

• Step 1: Upgrade your app to React 18 and run tests; nothing changes unless you opt into concurrent features.
• Step 2: Enable StrictMode in dev to find lifecycle/idempotency issues early.
• Step 3: Start adding concurrent features incrementally (use startTransition/useTransition/useDeferredValue where appropriate) or rely on updated libraries/frameworks that opt-in for you.
• Step 4: Test SSR paths if you adopt streaming Suspense; treat Server Components as experimental until the minor release.

Notes

• React Native will ship React 18 as part of the New React Native Architecture.
• Expect small migration fixes mostly in library authors and complex components that rely on synchronous render assumptions.