React 18

Frontend Bootcamp 2022

Carlos Contreras

What's new?

me

How to update?

npm install react@18 react-dom@18

To install the latest version of React:

 

Or if you’re using yarn:

 

yarn add react@18 react-dom@18

New React-Dom API

React 17

import ReactDom from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

ReactDOM.render(<App />, container);

React 18

import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");

const root = createRoot(rootElement);

root.render(<App />);

Concurrent Rendering

New behind-the-scenes mechanism that enable React to prepare multiple versions of your UI at the same time. It's not a feature it is a foundational update to react core

A key property of concurrent react is that rendering is interruptible.

Concurrent Rendering

React 17

Updates are rendered in a single uninterrupted synchronous transaction. Once an update starts rendering nothing can interrupt it until the user can see the result on the screen.

React 18

 

In a concurrent render, this is not always the case. React may start rendering an update, pause in the middle, then continue later. It may even abandon an in-progress render altogether. React guarantees that the UI will appear consistent even if a render is interrupted.

Concurrent Rendering

With this capability, React can prepare new screens in the background without blocking the main thread.

 

This means the UI can respond immediately to user input even if it’s in the middle of a large rendering task, creating a fluid user experience.

 

It also enables reusable state. Concurrent React can remove sections of the UI from the screen, then add them back later while reusing the previous state.

Transitions

A transition is a new concept in React to distinguish between urgent and non-urgent updates.

  • Urgent updates reflect direct interaction, like typing, clicking, pressing, and so on.

  • Transition updates transition the UI from one view to another.

Transitions

Updates wrapped in transitions are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in.

 

If a transition gets interrupted by the user, React will throw out the stale rendering work that wasn’t finished and render only the latest update.

Concurrent API

useTransition() & startTransition()
useDeferredValue()

Let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates  to interrupt non-urgent state updates.

Similar to debouncing but there is no fixed time delay, React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn’t block user input.

Automatic batching

Batching is when React groups multiple state updates into a single re-render for better performance.

 

Without automatic batching, we only batched updates inside React event handlers.

 

 

const handleClick = () => {
  setIsFetching(false);
  setError(null);
  setFormStatus('Success')
}

re-rendered   1   time

Automatic batching

Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default. 

 

With automatic batching, these updates will be batched automatically.

const handleClick = () => {
  setTimeout(() => {
    setIsFetching(false);
    setError(null);
    setFormStatus('Success');
  }, 100);
};

re-rendered   3   times

Improved Suspense

The React Suspense feature was released as part of React 16 version. It had only one use case, it was meant to be used with its React.lazy API for code splitting. 

const MyComponent = () => (
  <Suspense fallback={<Spinner />}>
    <LazyComponent />
  </Suspense>
);

With React 18, Suspense enables progressively streaming HTML.

Improved Suspense

Improved Suspense

In React 18, you can start using Suspense for data fetching in opinionated frameworks like Relay, Next.js, Hydrogen, or Remix. Ad hoc data fetching with Suspense is technically possible, but still not recommended as a general strategy.

New strict mode behavior

 

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

New strict mode behavior

 

React 18

* React mounts the component.
  * Layout effects are created.
  * Effects are created.
* React mounts the component.
  * Layout effects are created.
  * Effects are created.
* React simulates unmounting the component.
  * Layout effects are destroyed.
  * Effects are destroyed.
* React simulates mounting the component with the previous state.
  * Layout effects are created.
  * Effects are created.

React 17

New Hooks

Hook for generating unique IDs on both the client and server, while avoiding hydration mismatches.

It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs.

useId()

useId is not for generating keys in a list. Keys should be generated from your data.

New Hooks

useSyncExternalStore()

useSyncExternalStore is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous.

useSyncExternalStore is intended to be used by libraries, not application code.

New Hooks

useInsertionEffect is intended to be used by libraries, not application code.

useInsertionEffect()

useInsertionEffect allows CSS-in-JS libraries to address performance issues of injecting styles in render.

 

Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this.

IE Support

React 18 is dropping support for Internet Explorer, which is going out of support on June 15, 2022.

 

The reason is because new features introduced in React 18 are built using modern browser features which cannot be adequately polyfilled in IE.

CATEGORY Feature
Concept Concurrent React
Features Automatic Batching, Transitions, Suspense on the server
APIs createRoot, hydrateRoot, renderToPipeableStream, renderToReadableStream
Hooks useId, useTransition, useDeferredValue, useSyncExternalStore, useInsertionEffect
Updates Strict mode
Deprecated/discouraged ReactDOM.render, renderToString

In Summary

New Client and Server Rendering APIs

React DOM Client

These new APIs are now exported from react-dom/client:

 

  • createRoot: New method to create a root to render or unmount. Use it instead of ReactDOM.render. 

 

  • hydrateRoot: New method to hydrate a server rendered application.

New Client and Server Rendering APIs

React DOM Server

These new APIs are now exported from react-dom/server and have full support for streaming Suspense on the server:

 

  • renderToPipeableStream: for streaming in Node environments.

 

  • renderToReadableStream: for modern edge runtime environments, such as Deno and Cloudflare workers.

Questions?

Thank you!

Frontend Bootcamp 2022

 

 

React 18

By Carlos Contreiras

Made with Slides.com

React 18

  • 150

More from Carlos Contreiras