React 18 Beta is here

Hi everyone, I'm Kasong.

After several months of work in the React18 working group v18 was finally Alpha version to the Beta version.

This article will explain:

• Changes brought by this update
• Impact on developers
• How to install v18 Beta
• v18 stable version come

The changes brought about

After continuous communication with the community, the Beta version will have the following three API changes:

1. useSyncExternalStore will replace useMutableSource for subscribing to external sources, see: #86 Discussion

The usage is similar to the following:

import {useSyncExternalStore} from 'react';

// 基础用法，getSnapshot返回一个缓存的值
const state = useSyncExternalStore(store.subscribe, store.getSnapshot);

// 根据数据字段，使用内联的getSnapshot返回缓存的数据
const selectedField = useSyncExternalStore(store.subscribe, () => store.getSnapshot().selectedField);

2. useId used between the client and the server generates a unique ID , avoid SSR hydrate when the elements do not match, see # 111 to discuss

The usage is similar to the following:

function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Do you like React?</label>
      <input type="checkbox" name="react" id={id} />
    </>
  );
);

3. useInsertionEffect used to insert the global DOM node, see #110 Discussion

useInsertionEffect work like useLayoutEffect , the difference lies in the implementation of the callback was also unable to access ref in DOM node.

You can operate the global DOM node (such as <style> or SVG <defs ) Hook

Operating CSS (such as the CSS-IN-JS scheme) can use this Hook insert the global <style> .

The usage is similar to the following:

function useCSS(rule) {
  useInsertionEffect(() => {
    if (!isInserted.has(rule)) {
      isInserted.add(rule);
      document.head.appendChild(getStyleForRule(rule));
    }
  });
  return rule;
}
function Component() {
  let className = useCSS(rule);
  return <div className={className} />;
}

At this point, v18 API will not be added until the official version is released.

Impact on developers

React Beta version in the production environment of multiple applications for several months and believes it is stable enough. Therefore, developers can already upgrade to version v18 Beta

Beta as the pre-release version , is different from the final official version: there may be a little bug , but the overall stability.

Well-known projects compatible with v18

• Next.js
• Gatsby
• React Redux
• React Testing Library

Install Beta

The installation command is as follows:

# npm
npm install react@beta react-dom@beta
# yarn
yarn add react@beta react-dom@beta

When will the stable version come back

According to Andrew , the earliest official release date may be at the end of January 22.

Summarize

Regardless of the new document or the Beta version, it can be found that the React team rhythm has accelerated significantly in the second half of the year.

From the v15 upgraded to v16 enable the Fiber architecture, the React team has been working hard for the stability concurrent updates.

This day is finally not far...

Welcome to join the human high-quality front-end framework group , take flight