The React Show

A podcast focused on React, programming in general, and the intersection of programming and the rest of the world. Come join us on this journey.


[46] React 18 Released! Everything you need to know

LinksTwitter - The React ShowTwitter - Thomas HintzYouTubeResourcesReact 18 Release PostReact 18 Upgrade GuideShow NotesMajor New Features Concurrency! Mostly an implementation detail but powers many of the...



Show Notes

  • Major New Features 
    • Concurrency! 
    • Mostly an implementation detail but powers many of the features.
    • Interruptible renders! Better/smoother UI UX
    • React can abandon and resume renders.
    • Upcoming minor release will include Offscreen component for that allows restoring previous screens in the same state or even rendering a screen in the background.
    • Breaking changes? 
    • Concurrent rendering is technically a breaking change
    • Only enabled in parts of your app that use new features
    • Benefits will take some time to realize, like waiting on library authors
    • Suspense in Data Frameworks
    • Server Components, still in development
    • Automatic Batching
    • Prioritized updates / AKA "transitions"
    • Suspense On The Server
    • Strict Mode developer features
    • useTransition mark state updates as non-urgent
    • useDeferredValue an upgrade over debouncing, an interruptible render that doesn't block user input
    • useSyncExternalStore for libs, removes the needs to use useEffect when implementing subscriptions
    • useInsertionEffect for libs, helps with CSS-in-JS lib performance issues
  • How to upgrade: 
    • install React 18 via npm
    • change ReactDOM.render to ReactDOM/client.createRoot (unmountComponentAtNode is also updated)
    • callback is removed from render use useEffect or similar instead depending on use case
    • If using SSR with hydration change hydrate to hydrateRoot
  • State of React 18 & Reported issues:
  • Should you upgrade? Or when should you upgrade?

Support the Show.