React 18 Released! Everything you need to know

29/04/2022 42 min Temporada 1 Episodio 46
React 18 Released! Everything you need to know

Listen "React 18 Released! Everything you need to know"

Episode Synopsis

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 features.Interruptible renders! Better/smoother UI UXReact 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 changeOnly enabled in parts of your app that use new featuresBenefits will take some time to realize, like waiting on library authorsSuspense in Data FrameworksServer Components, still in developmentAutomatic BatchingPrioritized updates / AKA "transitions"Suspense On The ServerStrict Mode developer featuresuseTransition mark state updates as non-urgentuseDeferredValue an upgrade over debouncing, an interruptible render that doesn't block user inputuseSyncExternalStore for libs, removes the needs to use useEffect when implementing subscriptionsuseInsertionEffect for libs, helps with CSS-in-JS lib performance issuesHow to upgrade: install React 18 via npmchange ReactDOM.render to ReactDOM/client.createRoot (unmountComponentAtNode is also updated)callback is removed from render use useEffect or similar instead depending on use caseIf using SSR with hydration change hydrate to hydrateRootState of React 18 & Reported issues:Should you upgrade? Or when should you upgrade?Support the show