18.0.0 (March 29, 2022)

Version: 18.0.0, release time: 2022.3.29, Tag: Lastest

Below is a list of all the new features, apis, deprecations, and disruptive changes.

Read the React 18 release and The React 18 Upgrade guide for more information.

New features

React

  • UseId is a new hook that generates unique ids on the client and server to avoid mismatches during water injection. This is primarily used when integrating component libraries with apis that require unique ids. This addresses an issue that appears in the React 17 version below, but more importantly in React 18 addresses the issue of how the new streaming service renderer passes unordered HTML.

  • StartTransition and useTransition let you update states that are not urgent. Updates to other states are considered urgent by default. React will allow emergent state updates (for example, input field content updates) to interrupt non-emergent state updates (for example, rendering search results).

  • UseDeferredValue allows you to postpone rerendering of non-urgent parts of the rendering tree. It’s a bit like stabilization, but it has some other advantages over it. It doesn’t have a fixed time delay, so React will try to delay rendering as soon as the first render update comes to the screen. This delayed rendering is interruptible and does not block user input.

  • UseSyncExternalStore is a new hook that addresses the performance of the CSS-in-JS library for injecting styles into renderings. If you’re not already building a CSS-in-JS library, you’ll never need to use it. This hook runs immediately after the DOM mutates and before Layout Effects reads the new Layout. This addresses an issue that appears in React 17 below, but more importantly in React 18, React will yield to the browser in concurrent rendering, giving it a chance to recalculate the layout.

React DOM Client

These new apis are now exported from the React-dom /client package:

  • createRoot: created forrenderandunmoutThe root node of. Use it instead ofReactDOM.render. React 18’s new features won’t work without it.
  • hydrateRoot: a new way to water server renderers. Use it to replaceReactDOM.hydrateUse with the React DOM server API. React 18’s new features won’t work without it.

Both createRoot and hydrateRoot accept a new option called onRecoverableError, which is used when you want to recover from an error during React rendering or when you want to view the log while flooding. By default, React uses reprotError, or console.error in older browsers.

React DOM Server

These new apis are now exported from the React-DOM /server package and fully support streaming Suspense on the server side:

  • renderToPipeableStream: used for flows in the Node environment.
  • renderToReadableStream: used in modern edge operating environments such as Deno and CloudFlare Workers.

The existing renderToString method continues to work, but is not recommended.

abandoned

  • react-dom:ReactDOM.renderIs rejected. Using it will issue a warning and demote your app to React 17 mode.
  • react-dom:ReactDOM.hydrateIs rejected. Using it will issue a warning and demote your app to React 17 mode
  • react-dom: ReactDOM.unmountComponentAtNodeIs rejected.
  • react-dom: ReactDOM.renderSubtreeIntoContainerIs rejected.
  • react-dom/server: ReactDOMServer.renderToNodeStreamIs rejected.

Disruptive change

React

  • Automated batching: This release introduces performance improvements and changes the way React batching updates are handled so that more batching can be done automatically. See Automatic batching for fewer renders in React 18 for details. In the rare cases where you need to opt out and package state updates, use flushSync.

  • Stricter strict mode: In the future, React will provide a feature that keeps components in state between uninstalls. Ready to implement it in the future, React 18 introduces a new development-only check in strict mode. React automatically unmounts and remounts each component each time it is mounted for the first time, restoring the previous state on the second mount. If this breaks your application, consider removing strict mode until you can fix the component to fit the reinstallation using the existing state.

  • Consistent useEffect timing: React now synchronizes the refresh effect function if an update triggers input events scattered across the user, such as a click or keydown event. In the past, behavior was not always predictable or consistent.

  • Stricter waterflood errors: Waterflood mismatches due to missing or extra text content are now treated as errors rather than warnings. React will no longer try to “patch” a single node to match server flags by inserting or removing a node on the client, but will instead tell the client to render to the closest

    boundary in the tree. This ensures consistency of waterflood trees and avoids potential privacy and security vulnerabilities that could result from waterflood mismatches.

  • Trees are always consistent: If a component is hanging before it is fully added to the tree, React will not add it to the tree in an incomplete state and will not trigger its effects. Instead, React will discard the new tree entirely, wait for the asynchronous operation to complete, and then try rendering again. React will concurrently attempt to render retries without blocking the browser.

  • Layout Effects with Suspension: When a tree rehangs and reverts to the fallback state, React now cleans up Layout Effects and recreates them when the contents within boundaries are displayed again. This fixes an issue where component libraries cannot measure the layout properly when using hangs.

  • New JS environment requirements: React now relies on modern browser features, including Promise, Symbol, and object.assign. If you need to support older browsers and devices, such as Internet Explorer, that do not offer the native features of modern browsers or have incompatible implementations, consider including a global Polyfill in your packaged application.

Significant changes

React

  • Components can now render undefined: React no longer throws undefined if you return it from a component. This makes the allowed component return values consistent with those allowed in the middle of the component tree. We recommend using a linter to prevent errors like forgetting return statements before JSX.

  • Act warnings are now optional in testing: Act warnings are not necessary if you are running end-to-end tests. We introduced an opt-in mechanism, so you can enable them only in unit tests because they are useful and beneficial.

  • There are no warnings about setState on unmounted components: Previously, when you called setState on unmounted components, React would issue a memory leak warning. The warning was added for subscriptions, but people only encounter it when the Settings state is fine, and trying to fix it makes the code worse. We have removed this warning.

  • Console logs are not suppressed: React renders each component twice when you use strict mode to help you find unexpected side effects. In React 17, we masked one of the rendered console logs to make them easier to read. In response to confusing feedback from the community, we removed the block. Conversely, if you have React DevTools installed, the second log rendering will be grayed out and there will be an option (off by default) to mask them completely.

  • Improved memory usage: React now cleans up more internal fields on uninstall, making the impact of potential unfixed memory leaks in application code less severe.

React DOM Server

  • RenderToString: No longer fails when the server hangs. Instead, it issues back HTML for the most recent

    boundary, and then retries rendering the same content on the client. It is still recommended that you use a stream API like renderToPipeableStream or renderToReadableStream instead.

  • RenderToStaticMarkup: No more errors occur when the server is suspended. Instead, it issues back HTML for the most recent Suspense> boundary and then retries the render on the client side.

All changes

React

  • Adding useTransition and useDeferredValue will leave emergency updates at transition time.

  • Add useId to generate a unique ID.

  • Add useSyncExternalStore to help external repositories integrate with React.

  • Add startTransition as useTransition that does not need to wait for feedback.

  • When the content reappears, suspend and reinstall Layout Effects.

  • Rerunning effects with

    to check the recoverable state.

  • Assume that Symbols are always available.

  • Remove the object – assign polyfill.

  • Remove the unsupported unstable_changedBits API.

  • Allows components to render undefined.

  • Synchronizes Flush useEffect when a discrete event such as a synchronize click is triggered.

  • Suspended fallback={undefined} now has the same effect as null and is not ignored.

  • Treat all lazy() as equivalent components that resolve the same.

  • Not patch console on first render.

  • Improve memory usage.

  • Improved string casting of thrown messages (Temporal.*, Symbol, etc.).

  • SetImmediate is used when a MessageChannel is available.

  • Fixed an issue where context could not propagate within the suspended tree.

  • Fixed bug WHERE useReducer ‘observed an error property when removing the eager Bailout mechanism.

  • Fixed setState being ignored when adding iframes in Safari.

  • Fixed crash when rendering ZonedDateTime in tree.

  • Fixed crash in tests when documents were set to NULL.

  • Fixed an issue where onLoad was not triggered when concurrency was enabled.

  • Fix warning when selector returns NaN.

  • Fix the generated license header.

  • Add package.json as one of the entry points.

  • Allows a mount outside the mount boundary.

  • Record a recoverable error when the water injection operation fails.

React DOM

  • addcreateRootandhydrateRoot.
  • Add optional water injection operations.
  • Add to the list of known ARIA propertiesaria-description.
  • addonResizeEvent to video element.
  • addimagesizeandimageSrcSetTo a given property.
  • If providedvalue, non-strings are allowed<option>The children.
  • repairaspectRatioThe style is not applied.
  • ifrenderSubtreeIntoContainerIs called, a warning is issued.

React DOM Server

  • Add a new stream renderer.
  • Fixed context providers handling multiple requests in SSR.
  • Text does not match and falls back to client rendering.
  • abandonedrenderToNodeStream.
  • Fix false error log in new server renderer.
  • Fixed a bug in the new server renderer.
  • Ignore functions and symbol values in custom elements on the server.

React DOM Test Utils

  • whenactThrown when used in production.
  • Support the use ofglobal.IS_REACT_ACT_ENVIRONMENTDisable false behavior warnings.
  • extensionactWarning to override all apis that might schedule React work.
  • makeactWork in batches.
  • Remove the warning for dangling passive effects.

React Refresh

  • Trace late- Mounted Roots in quick refresh.
  • inpackage.jsonaddexportsField.

Server Components (experimental)

  • Add server context support.
  • addlazySupport.
  • Update the WebPack plug-in for WebPack 5.
  • Fixed a bug in the Node loader.
  • useglobalThisInstead ofwindowAs an edge environment.

Artifacts

  • React: unpkg.com/[email protected]….
  • The react – art: unpkg.com/react-art@1…
  • The react – dom: unpkg.com/react-dom@1…
  • The react – is: unpkg.com/react-is@18…
  • The react – test – the renderer: unpkg.com/react-test-…
  • The scheduler: unpkg.com/scheduler@1…

The above is all the translation content, the translation is not good, please forgive me. If you have any ideas, please feel free to comment.

Small egg: github.com/reactjs/rea…

❤ ️ support

If this article has been helpful to you, please support me by clicking 👍. Your “likes” are the motivation for my creation.