--- title: "It's React 19! Almost." publication: "React Status" issue: 383 published_at: "2024-05-01" canonical_url: "https://react.statuscode.com/issues/383" --- Plus don't forget React 18.3, and a way to start building a new browser extension ASAP. | #​383 — May 1, 2024 [Read on the Web](https://react.statuscode.com/issues/383) Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/react-accessibility/?utm_source=email&utm_medium=reactstatus&utm_content=reactaccessibility) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/lfdgigwqiilsvwfpnmsd.jpg)](https://react.dev/blog/2024/04/25/react-19) [The React 19 Beta](https://react.dev/blog/2024/04/25/react-19) — The React team can _say_ this beta is designed to get library developers prepared for an eventual React 19 release, but that hasn’t stopped everyone digging into all the new features anyway ;-) If you want to upgrade immediately, [there’s a thorough upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide), but otherwise, here are the highlights: - [Full support for Custom Elements.](https://react.dev/blog/2024/04/25/react-19#support-for-custom-elements) – Custom Element support has always been a thorn in React's side due to how it treats props vs attributes, but finally _there's a way!_ - All the latest [React Server Components goodies.](https://react.dev/blog/2024/04/25/react-19#react-server-components) Natch. - [Actions](https://react.dev/blog/2024/04/25/react-19#actions) – You can now use async functions in transitions and get automatic optimistic updates. This leads to some opportunities for dramatic code simplification and smoother operation when [working with forms](https://react.dev/blog/2024/04/25/react-19#form-actions) (say hello to [useActionState](https://react.dev/reference/react/useActionState).) - [`use`](https://react.dev/blog/2024/04/25/react-19#new-feature-use) – Read a promise with use and React will Suspend until the promise resolves. - You can now [render metadata tags (like `title`, `link`, and `meta`) in components](https://react.dev/blog/2024/04/25/react-19#support-for-metadata-tags) natively. - [Render async scripts anywhere in your component tree.](https://react.dev/blog/2024/04/25/react-19#support-for-async-scripts) If you'd prefer to hear / see someone walking through the release post, I think [▶️ Theo did a pretty good job in 39 minutes.](https://www.youtube.com/watch?v=sFeu_aK8cB8) [![\](https://copm.s3.amazonaws.com/ad03a471.png)](https://frontendmasters.com/courses/react-accessibility/?utm_source=email&utm_medium=reactstatus&utm_content=reactaccessibility) [React Web App Accessibility](https://frontendmasters.com/courses/react-accessibility/?utm_source=email&utm_medium=reactstatus&utm_content=reactaccessibility) — Join Marcy Sutton Todd for this extensive video course covering the most common accessibility issues seen in React apps. You'll gain knowledge on how to make your web apps more compliant with WCAG standards, creating more inclusive experiences. Frontend Masters sponsor [React 18.3 Was Released Too](https://github.com/facebook/react/releases/tag/v18.3.0) — Following on almost two years after 18.2, React 18.3 is the first _true_ production release of React in a long time. It is, however, identical to 18.2 but **adds warnings for deprecations**, so if you’re not going to leap straight into 19, this is the more responsible path to take. Rick Hanlon **IN BRIEF:** - Zachary Lee has [a quick guide to React 19 Beta](https://javascript.plainenglish.io/react-19-beta-release-a-quick-guide-05678e2ed571) taking more of a code-led approach. - 📅 [React Rally 2024](https://www.reactrally.com/) is taking place this August 12-13 in Utah and already has [some fantastic speakers](https://www.reactrally.com/speakers) lined up. Tickets go on sale later today. - 🗓️ Major new versions of the popular [React Date Picker](https://projects.wojtekmaj.pl/react-date-picker/) and [React Calendar](https://projects.wojtekmaj.pl/react-calendar/) components have landed with React 19 support. - Andy Bell shares [his thoughts on React's custom element support.](https://piccalil.li/blog/upcoming-custom-element-support-in-react/) [Migrate to React 19 with `ast-grep`?](https://dev.to/herrington_darkholme/migrate-to-react-19-with-ast-grep-28op) — It’s hard to tell if this is doing things on easy or hard mode, but semi-automating the changes needed to get an app ready for React 19 is certainly interesting. Herrington Darkholme [HTML Attributes vs DOM Properties](https://jakearchibald.com/2024/attributes-vs-properties/) — They’re different, but often coupled. Jake outlines the difference, and why it matters. He also touches on how frameworks deal with the contrast and how it has affected React’s support for custom elements _so far_ (cough, cough.. React 19..). Jake Archibald 📄 [React 19 Beta: Major Updates to Async Transactions are Here](https://coderoasis.com/react-19-beta/) CoderOasis 📄 [Path to a Clean(er) React Architecture: API Layer and Fetch Functions](https://profy.dev/article/react-architecture-api-layer-and-fetch-functions) Johannes Kettmann 📺 [A Look at Using TC39 / ES Built-In Signals in React and Svelte Today](https://www.youtube.com/watch?v=HSVcZa5yTKE) Jack Herrington 📄 [Ways to Integrate React with Ruby on Rails 7](https://thoughtbot.com/blog/how-to-integrate-react-rails) Dave Iverson 📺 [Learn Next.js and Cloudinary by Building a Cloud Photo App](https://www.freecodecamp.org/news/create-a-google-photos-clone-with-nextjs-and-cloudinary/) Colby Fayock 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/rdfl9mjouaoqvrddec4z.jpg)](https://extension.js.org/) [extension.js: Zero-Config, Cross Browser Extension Dev Starter](https://extension.js.org/) — The goal is to make it as simple as a `npx extension create my-extension` to get started with building your own React-powered browser extension. [GitHub repo.](https://github.com/cezaraugusto/extension.js) Cezar Augusto [Divz: A Component to Scroll, Swipe & Zoom Elements on the 3D Z‑Axis](https://github.com/lewhunt/divz) — Wrapped around a variety of DIVs containing various things (images, say), Divz makes it easy to flick through them in a visually striking way. Check out [the homepage](https://lewhunt.github.io/divz/) to enjoy some live demos. Lewis Hunt 📰 Classifieds 😎 [5 easy ways to implement “dark mode” in React Native](https://buttercms.com/blog/implement-dark-mode-react-native/). Appearance, React navigation, Styled components, Emotion native & React paper. --- 🗣️"Compared to our previous experiences in the security/auth space, [Userfront is an order of magnitude simpler to use](https://userfront.com/?&utm_source=react-statuscode-com&utm_medium=newsletter_classified_listing&utm_campaign=magnitude&utm_content=transformational)." [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/pjcspb0zxlwayzipn8jk.jpg)](https://docs.pmnd.rs/uikit/getting-started/introduction) [uikit: Bringing User Interfaces to React-Three-Fiber](https://docs.pmnd.rs/uikit/getting-started/introduction) — Build 3D user interfaces for Three.js using [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) with support for numerous common UI controls. Ideal for games, XR/AR, and spatial scenarios. [GitHub repo.](https://github.com/pmndrs/uikit/) Bela Bohlender [React Spaces: Divide a Page or Container into Scrollable and Resizable 'Spaces'](https://allaneagle.com/projects/react-spaces) — It’s not quite 1990s style ‘frames’ but.. it’s not miles away either. [GitHub repo.](https://github.com/aeagle/react-spaces) Allan Eagle - 📄 [React-PDF 8.0](https://github.com/wojtekmaj/react-pdf) – React component to display PDFs. Now supports React 19. - [TanStack Virtual 3.5](https://github.com/TanStack/virtual) – Headless UI for virtualizing scrollable elements. - [ka-table 9.0](https://github.com/komarovalexander/ka-table) – Lightweight table component. ([Demos.](https://komarovalexander.github.io/ka-table/#/overview)) - 😀 [Emoji Mart 5.6](https://github.com/missive/emoji-mart) – Emoji picking component. - [Preact 10.21](https://github.com/preactjs/preact/releases/tag/10.21.0) – The 3KB React compatible alternative. - [MUI X 7.3.1](https://github.com/mui/mui-x/releases/tag/v7.3.1) – Popular React component suite. 🎁 And one for fun.. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/fzzmtuh2r7uwvyl0btrk.jpg)](https://react-spring-visualizer.com/) [React-Spring Visualizer](https://react-spring-visualizer.com/) — [React Spring](https://www.react-spring.dev/) is a popular spring-physics based animation library for animating components and this is an interesting way to see how different settings affect the.. _springiness?_ Joost Kiens Curated by Peter Cooper and Terence C. Gannon. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom