The letter S in a light blue, stylized speech bubble followed by SpeakBits
SpeakBitsThe letter S in a light blue, stylized speech bubble followed by SpeakBits
Trending
Top
New
Controversial
Search
Groups

Enjoying SpeakBits?

Support the development of it by donating to Patreon or Ko-Fi.
About
Rules
Terms
Privacy
EULA
Cookies
Blog
Have feedback? We'd love to hear it!

React 19 Beta!

react.dev
submitted
a year ago
byjustadevtoprogramming

Summary

React 19 Beta is now available on npm! In our React 19 Beta Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we’ll give an overview of the new features in React 19, and how you can adopt them.

In React 19, we’re adding a new hook called useFormStatus to make this easier. UseFormStatus reads the status of the form it’s attached to. We’ve also added a new way to read a promise with usePromise.

React 19 includes all of the React Server Components included in the Canary release. This means libraries that ship with React 19 can now be used as a peer dependency with a react-server export condition for use in frameworks that support the Full-stack React Architecture. For more, see the docs for React 19.

In React 19, you can render as a provider instead of <Context.Provider>. In future versions, we will deprecate .Cleanup functions for refs. In the past, these elements would need to be inserted manually in an effect.

For simple use cases, rendering Document Metadata as tags may be suitable, but libraries can offer more powerful features like overriding generic metadata with specific metadata. By supporting these metadata tags natively, we’re able to ensure they work with client-only apps, streaming SSR, and Server Components.

If an element that renders on the client doesn’t match the element found in the server, React will force a client re-render to fix up the content. Previously, if an element was inserted by third-party scripts or browser extensions, it would trigger a mismatch error and client render.

 digital clock stopwatch stop watch analog clock beaker-0
12

5 Comments

7
kaiserseahorse
a year ago
👏 About time! All of these new hooks and paradigms are looking good!
5
justadevOP
a year ago*
Actions and the useOptimistic are what I'm most excited about!
6
joseph
a year ago
Removing forwardRef is going to be a game changer for a component library I manage!
4
justadevOP
a year ago
It's been a massive pain to try and always remember to add it to some reusable components. Forget it one time and you get yelled at for months
2
throwschen
a year ago
The conditional use is what I'm most excited about! I've always hated that hooks, like for useContext, needed to run even though they would get thrown away.