?? TL;DR React 19 Beta

Last Friday the React team announced that React 19 Beta is now available on NPM. The announcement gives an overview of the new features in React 19. If you don’t have time or don’t want to read it I’ve done it for you and here’s my short summary.

????????'?? ??????

??????????????

New hooks and improvements to help handle pending states, errors, forms, and optimistic updates when using async functions, referred to as “actions” in the docs.

????????????????????????????

Takes an action and returns the state of the action, a trigger method to call the action, and a “pending” boolean. Deprecates ????????????????????????.

<????????> ??????????????

Pass functions as actions to <????????>, <??????????>, and <????????????> elements and automatically reset the form for uncontrolled components.

??????????????????????????

Checks the status of a parent form in a child, as if the form was a context provider and returns a “pending” boolean, the ???????????????? for the form, whether it’s a ?????? or ????????, and a reference to the triggered action. Note that this hook cannot be consumed in the same component as the <????????>.

??????????????????????????

Render optimistic UI while performing data mutations. React takes care of switching back to the original state if the mutation fails.

??????: ??????

Read resources, ??????????????????????????, in render using ??????. E.g. React reads a promise and suspends until the promises resolves, or read contexts directly (no more need for ???????????????????? hooks).

????????????????????????

?????? ???? ?? ????????

No more need for ????????????????????, instead React 19 allows access to the ref as any other prop. ???????????????????? will be deprecated in the future.

<??????????????> ???? ?? ????????????????

No more need for <??????????????.????????????????>. Just use <Context>. <??????????????.????????????????> will be deprecated in the future.

?????????????? ?????????????????? ?????? ????????

Return a cleanup function from ref callbacks (like in ??????????????????) and React will run it when the component unmounts.

????????????????????????????????

Provide an initial value to ????????????????????????????????.

?????????????? ?????? ???????????????? ????????????????

Provide metadata tags directly in your component and React will hoist them to the <????????> in the document. Probably won’t make react-helmet obsolete, but definitely makes setting metadata tags like <??????????> much easier.

?????????????? ?????? ?????????????????????? ?????? ?????????? ??????????????

React now supports rendering <????????> and <??????????> anywhere in your component tree. With a little help React can even manage the insertion order to make sure that content depending on the styles aren’t rendered before their stylesheets.

?????????????? ?????? ???????????????????? ??????????????????

Multiple new APIs for loading and preloading browser resources (??????????????????????, ????????????????????, ??????????????, ??????????????????????????, ??????????????, and ??????????????????????????), pretty cool!

???????????? ?????????? ??????????????????

Improved error handling, removing duplicate error messages. For hydration errors the diff of the mismatch will be logged. Also provides two new root options to complement ????????????????????????????????????.

?????????????? ?????? ???????????? ????????????????

Full support for custom elements.

?????????? ???????????? ????????????????????

Full support for server components and server actions.