What’s New in React 18

/in /by

As some of you may know, React team is working on React 18 and it will be released soon. Here’s what’s coming to React 18:

Server Components

Demo event thumbnail

  • They are listening to feedback ever since and improving server components.
  • They are integrating a new async/await model instead of react-fetch.
new async/await model instead of react-fetch.

react-fetch library worked by wrapping your component with the REST API endpoint, and injected the response as prop to your Component. It felt like non-React pattern in my opinion.

 

  • They’ve decided not to use file extension based approach (.client.ts .server.ts), and moved on to annotating boundaries model.
annotating boundaries model.

annotating boundaries lets you import client and server like react/server. https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278

 

  • They work with Vercel and Shopify to keep the same semantic approach in Webpack and Vite. They need to make sure that all Server Component semantics are used the same way throughout the React ecosystem. They claim moving away from this prevents stability.

Vite dashboard

Loading Assets

  • Assets are grouped as scripts, external stylesheets, fonts and images. These were preloaded or loaded using webpack and webpack like external tools. This complicates coordination between streaming and RSC. React team aims to add React APIs that can run anywhere and simplify/unify preloading external assets.
Webpack

preload webpack plugin adds imports as rel inside pages. https://www.npmjs.com/package/preload-webpack-plugin

 

  • Also the API is required to support Suspense. This results in component getting blocked before image, CSS and fonts are loaded. But streaming and concurrent rendering steps won’t get blocked. This prevents the “popcorning” effect (visuals popping on the screen instantly and shifting layout).

SSR Optimizations

  • React team stated that they know Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are good solutions for pages that can be cached . But on Dynamic SSR side, content that can’t be cached completely can benefit from a performance boost. Their solution is compilation and static passing:
SSR Optimization

You can read the differences between CSR, SSR, SSG and ISR here: https://dev.to/pahanperera/visual-explanation-and-comparison-of-csr-ssr-ssg-and-isr-34ea

React Optimizing Compiler

  • At React Conf 2021, they introduced React Forget: https://www.youtube.com/watch?v=lGEMwh32soc
  • This compiler automatically wraps the component with useMemo and useCallback. This reduces the amount of re-rendering.
  • They re-wrote React Forget recently and it’s more capable and safer. Complex patterns like local mutations will be memoized.
React Optimizing Compiler

An example for local mutations. TeaGathering component is also a function that internally creates and mutates an array. If it accessed something out of the function, it wouldn’t be a local mutation.

 

  • They are working on a new playground to explore the new compiler’s features. This’ll help us understand better how React Forget compiler works. Even features like Live Render will arrive and we’ll see the output of the code changes in real time.

Offscreen

  • On web development, showing/hiding a div element is mostly done in two ways: removing/adding the element to DOM and adding display: none with CSS.
  • Adding/removing to/from DOM operations reset the state on every unmount call. Other states like the scroll position inside DOM reset as well.
  • When adding display:none; with CSS, React needs to keep rendering the component that’s hidden and needs to apply state updates to that component.
  • With the new <Offscreen> component, UI will be visually hidden and the component’s content gets deprioritized. This works just like content-visibility in CSS. So no need for content to sync with the hidden component.
  • Offscreen enables a lot of advanced capabilities. We won’t directly interact with the Offscreen API, just like other concurrent features like startTransition. However, an opinionated framework that’s built on top of React, like Remix, will handle things like:
  • instant transitions: Frameworks like Remixjs can prefetch the next page during hover event. With <OffScreen> it can prerender it too.
  • reusable state: While browsing between tabs, the state of the previous screens will be stored and restored once user comes back.
  • virtualized list: Virtualized list frameworks render more items than the visible on screen ones. With Offscreen invisible rows will be rendered at a lower priority.

 

  • backgrounded content: React team also plans a feature where an overlay modal can get deprioritized without being hidden.

Transition tracing

  • The current React profiler shows how fast/slow the components are rendering. However it doesn’t show what React is doing during rendering.
Transition tracing

Current React profiler

 

  • New profiler shows when components schedule their state updates and when React commits those updates. It also categorizes and prioritizes what happens.
  • This helps determine the cause for slow state commits. Developers can tap a button or trigger any component render and dissect what takes the most time.

 

  • They already added Interaction Tracing API but it got removed after some design flaws were pointed out. Now they work on a new Interaction Tracing API (Still called Transition Tracing because it gets triggered using startTransition).

New React Docs

  • They released the beta of React docs last year. Compared to the old docs, new one is more hooks heavy and has new diagrams. They also added interactive code samples. (I assume Rachel Nabors joining from Microsoft has something to do with this).
  • They halted documentation work to release React 18. Now since React 18 is out, they are commited to the documentation and get it ready for release.
  • They have a detailed section on effects. While writing this article, team realizes that a lot of the common effect patterns can be simplified by adding the new primitive hooks. That’s why they released the useEvent RFC.

Conclusion

React gets big changes and improvements constantly. Maybe it’ll become the dominant web development environment in the future, who knows :)

Please reach me if you find corrections or for general feedback. Thanks for reading.