React 18 Released! Everything you need to know

Links

Resources

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?

About