Links

• Twitter - The React Show
• Twitter - Thomas Hintz
• YouTube

Resources

• React 18 Release Post
• React 18 Upgrade Guide

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