DEV Community

Cover image for What to Expect from React 19? React Compiliers, React Canary, React Actions.
Sandeep Kherkatary
Sandeep Kherkatary

Posted on

What to Expect from React 19? React Compiliers, React Canary, React Actions.

It's been nearly two year since react 18 was released. It introduced many new features, but it also had limitations. This year, we'll be getting React 19, and its release date is quickly approaching. So let's take a look at what new features we can expect from React 19.

Features in React 19

1.React Compiliers

React Compiler is no longer a research project; it now powers Instagram.com in production, and will be added to other Meta surfaces, And also there will be a open source release.

React Compilier aims to tackle a lot of issues like manual memoization, javascript optimization.

2.Auto Memoization

React sometimes re-render too much when state changes. Since the early days of React the solution for such cases has been manual memoization like useMemo,useCallback. But manual memoization is a compromise. It clutters up our code, is easy to get wrong, and requires extra work to keep up to date. React Compilier aims to optimize it and perform a auto memoization.

3. Javascript Optimization

JavaScript is a notoriously challenging language to optimize, due to its loose rules and dynamic nature. React Compiler is able to compile code safely by modeling both the rules of JavaScript and the “rules of React”. For example, React components must be idempotent — returning the same value given the same inputs — and can’t mutate props or state values. These rules limit what developers can do and help to carve out a safe space for the compiler to optimize.

React Actions

React Labs have been exploring solutions for sending data from the client to the server with Server Actions for execution of database mutations and implement forms.
Actions allow you to pass a function to DOM elements such as <form/>

<form action={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>
Enter fullscreen mode Exit fullscreen mode

React's form action handles data submission for you, allowing synchronous or asynchronous functions defined on client-side or server-side with hooks for managing form state.

React Canaries

React Canaries is a new officially supported release channel for React. It allows adopting new React features before they are released in a stable version. Canaries are similar to how Meta has been using React internally. Canaries are designed for curated setups, like frameworks, and not for most users.
New Features in Canary include

  • Directives
  • Document Metadata
  • Asset Loading
  • Actions

react@canary is now ready to ship to react@latest. The new features mentioned above are compatible with any environment your app runs in, providing everything needed for production use.

To read more about react 19 reffer to
ReactLabs:february2024
React server Components
React Canaries

Top comments (0)