What has changed in React?

As a developer, you need to stay up-to-date on the technology you use. Recently, version 19 of React went to stable. In this post, you will get acquainted with the changes that came out in version 19.

The post is in two parts, the first is about what's new in version 19 and what parts have been improved in React. Let's take a look at what's improved before the news.

giving ref as props

We would have to use forwardRef to pass the

refs as props, and that would be redundant. And the code written in it would be:

Now the ref can be given directly as props

cleanup function for ref

If the ref is used in a component, the ref must be cleared when the component is unmounted from the UI. This is important for efficient memory management and to avoid unexpected situations. In previous versions, this was written in the return part of useEffect:

After the change in version 19, the above code is written as:

Option to assign an initial value to useDeferredValue

you already know why initialValue is given, so you can go to the next section )

Metadata support

To assign meta elements like

meta, title to the desired page, you had to use useEffect or libraries like react-helmet.

Version 19 added the ability to use these tags directly.

automatically wraps meta tags into the

element when rendering a React component.

Support styles

This version also focused on optimizing styles, adding the ability to download styles at the right time and the precedence attribute. This attribute controls the order in which styles are added to the DOM. Styles are loaded before their dependent component mount.

Support for asynchronous scripts

Just like styles, asynchronous scripts can be downloaded at the desired time. A component that loads styles and asynchronous scripts doesn't have to worry about re-downloading them when they are used in multiple places, because they are cached the first time they are loaded )

Preload resources

Downloading a resource as quickly as possible has a good effect on site performance. New APIs were announced in React 19 to take advantage of this capability. These are the following

preinit - to quickly download and use the resource (scripts or modules);
preload - to download the resource in advance, in this case it is not necessary to use the loaded resource quickly (fonts, styles)
preconnect - opens a connection to the server where you want to load the resource, which speeds up the resource loading time.
prefetchDNS works like preconnect, except that it downloads and caches a resource before a request is made without creating a connection.

Support for custom elements

React did not recognize props when custom elements were used in previous versions, starting with the new version they can be used without problems. An example of a custom element -> .

Note - in some places examples are not provided through the code, you can see examples here

The above is the detailed content of What has changed in React?. For more information, please follow other related articles on the PHP Chinese website!