Hello and welcome! In today's episode, I'm going to share some insights on the upcoming changes in React 19, so without further ado, let's get started with some of the highlights.
The bigger picture
A statement from the React Blog:
In React Labs posts, we write about projects in active research and development. We’ve made significant progress since our last update, and we’d like to share our progress.
React 19 brings major changes and insights for the future.
The blog post provided detailed information on the upcoming release and the direction of React.
React compiler
One key topic discussed was the development of the React compiler, previously a research project. React compiler aims to prevent unnecessary renders in components. Instagram currently uses the React compiler to power its entirety.
The React team is working on implementing the React compiler in future releases to optimize rendering.
React compiler aims to render only the right parts of components. It automatically detects code that doesn't strictly follow React or JavaScript rules
It compiles safe code and skips unsafe code, aiming to improve performance and prevent unnecessary renders
Actions
React 19 extends server actions to include client-only applications. It enables defining synchronous and asynchronous functions for form submission with React managing the lifecycle. Two new hooks, 'useFormStatus' and another, will be introduced as part of the core React Library.
useFormState allows updating state based on form action.
It responds to the useFormStatus hook. Another hook called useOptimistic allows optimistically updating the UI.
React Canaries
React is now allowing us to test new changes before stable release. Changes are available in the Canary Channel for testing. Canary Channel allows users to test changes before the stable release.React 19 is introducing Canary with new features and a major release update.
Canary release includes React server components, asset loading, document metadata, and actions feature
Integration of directives likeuse client and use serverfor fullstack React Frameworks, supporting rendering document metadata and enhancing resource loading using suspense
Release date?
I guess you all are wondering about the release date for all these features right? React 19 is expected to be released either this year or the beginning of next year. The expectation for the release timing is based on the mentioned details.
I'm excited about the release and have some plans to provide updates and create new content for React 19. Please go ahead and see the official React Blog post.
That's it! LMK what you think about the upcoming changes.
Until next......
Top comments (17)
I'm really waiting on
useEffectEventwhich would solve some ugly hacks.I hope it progresses from the 'experimental' phase soon.
The fact that it did not while the tutorial on
react.devabsolutely points towards this and also the fact of no release since 2022 made me start looking for React alternatives. There is a scent of a decline in the air.I believe there is no alternative to react, all other major JS framework are far behind react in many aspects, having one single part of react that does not satisfy your requirements cant be solved by moving to another framework
You are correct, @hussam22. Finding an alternative to React is indeed very challenging.
I wish to find out for my own use cases there is or isn't a viable alternative. By viability I mean for an enterprise app you have everything: form handling, UI components, internationalization support.
Funnily enough,
react-queryis already ported tosolid-query. @tanstack is working on it.The decline may be slow, but it is good to be aware of it.
Hey everyone! I'm super excited about the new features in React 19. I've actually written an article about it, breaking down what's changing and what it means for developers like us. If you're curious to learn more, check out my article React 19.
Having the Form action be a function will also be super handy, versus an onSubmit handler, and it automatically uses the FormData object, which in many cases is all you need — no need for 2-way state binding in each of the fields
Thank you for sharing !!
My pleasure, Yogini16
Great share, @mitchiemt11 . Thank you very much.
My pleasure @chantal. Exciting times ahead!
Thanks for sharing Mitchell
🙇♂️
Please, ... could you suggest a way to install React Canary without using a framework?
🚀 I'm thrilled about these upcoming changes and have exciting plans for React 19 content updates! Let the React revolution begin!
Yay! @fpaghar I can't wait to see how it unfolds!