React 18 was announced in March 2022 and with this many new and amazing features were added. For instance, automatic batching wasn’t available in the previous versions. But in React 18, it was added. And now, as per the React blog, React 19 is also coming.
- React Compiler
Manual memoization is done whenever there’s too much re-rendering in case a state changes. But you see this very action is not right. Because it can make your code a bit messy. Just one wrong step and you’ll go down the rabbit hole. Even React considers manual memoization just a compromise.
They want React to re-render itself whenever there’s a state change. So, now they are developing a React compiler. It will prevent unnecessary renders. Instagram is already using it in its production. But what’s the advantage of React compiler? Well, it renders the right parts wherever a state is changed. In fact, it will also compile code as per the rules of JavaScript and React. In other words, this means that it will detect the code that isn’t aligned with the rules of React and JavaScript.
- Actions
In React 19, Server Actions are extended to include client-only apps. The APIs are also extended so that data handling is supported in client-only apps. But wait. What are Actions?
Well, as per React’s official website, Action allows you to pass a function to DOM elements. Further, Actions work both synchronously and asynchronously. They can also be defined on the client side.
Apart from this, two new hooks are also added in React. They are: useFormStatus and useFormState.
- useFormStatus()
The useFormStatus Hook provides status information of the last form submission.
To get status information, the Submit component must be rendered within a form. The Hook returns information like the pending property which tells you if the form is actively submitting.
- useFormState()
This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form applications.
dirtyFields is an object with the user-modified fields. Make sure to provide all inputs' default values via useForm, so the library can compare against the default values.
Further, another feature called useOptimistic will also be added in React 19. This hook will show a different state even when an async action is in progress.
Further, another feature called useOptimistic will also be added in React 19. This hook will show a different state even when an async action is in progress.
3.React Canaries
Finally! React thought of something really amazing: React Canary.
Using this, you can test new features even when they are in the design stage. So, this means you can use new features without even waiting for React’s next version release.
Result of all this? The community will be involved in deciding and finalizing features. So, if you want to include yourself in finalizing features of React, make sure you check the React Labs Blog Series. For now, React has added React Server Component, Asset Loading, Document Metadata, and Actions in React Canary.
Apart from these, in React 19, you will also find:
Directives namely use client and use server. Using these directives, you’ll be able to write reusable components.
Built-in support when it comes to rendering title, meta, and link tags. Further, their work will be similar in every environment.
Resource Loading APIs as well as Suspense integrated with resources like stylesheets, fonts, and scripts.
In short, in React 19, directives, built-in support for varying tags, two hooks, automatic rendering, and react canaries are all new!
Top comments (0)