This Week In React #181: React errors, Fast JSX, Flow, React-Query, Jotai, Inline styles, RSC, Next.js, RTL, RN 3D, Orbit, Gesture Handler, Skia...

This Week In React #181: React errors, Fast JSX, Flow, React-Query, Jotai, Inline styles, RSC, Next.js, RTL, RN 3D, Orbit, Gesture Handler, Skia...

ยท

8 min read


Hi everyone!

This week I found many React Core PRs to look at. Too many, in fact, so I've saved a few for next week!

After 2D with Skia, it's super excitings to see React Native devs exploring the 3D space!


๐Ÿ’ก Subscribe to the official newsletter to receive an email every week!

banner


๐Ÿ’ธ Sponsor

In-App Subscriptions Made Easy

In-App Subscriptions Made Easy

RevenueCat gives you everything you need to monetize, analyze, and grow your app business. Effortlessly control customer access and entitlements, manage data, and experiment with pricing. See why over 30,000 apps trust RevenueCat to power their in-app purchase infrastructure.


โš›๏ธ React

React Docs - Add onCaughtError / onUncaughtError, improve onRecoverableError

React Docs - Add onCaughtError / onUncaughtError, improve onRecoverableError

Recently, the React core team overhauled the way errors are handled in React 19. Those improvements are available in React 19 canary releases and should probably land in Next.js 14.2+ sooner or later. This notably includes new public API callbacks available on the React Root (createRoot, hydrateRoot):

  • onCaughtError ๐Ÿ†• reports errors caught by error boundaries

  • onUncaughtError ๐Ÿ†• reports uncaught errors (duh)

  • onRecoverableError now uses the ES Error Cause feature to report the original cause

The linked PR is the WIP documentation for those new APIs, including many interactive examples. The main motivation seems to be presenting an error dialog to the user.

What excited me most in all this is that it's the first time I'm able to see in action the brand-new React hydration error message displayed in a dialog, as shown in the screenshot above. This will greatly improve the DX of React!



๐Ÿ’ธ Sponsor

Refine - Open source Retool Alternative

Refine - Open source Retool Alternative

The sweet spot between the low code and traditional development for CRUD-heavy applications.

As an open-source React meta-framework designed for Enterprise applications, Refine offers a headless solution ideal for tasks like admin panels, dashboards, and internal tools.

While low-code tools may offer initial promise, they often fall short in handling complex scenarios due to scalability issues, limited customization options, and the risk of vendor lock-in.

Refine enables teams to rapidly develop production-ready apps while maintaining flexibility.


๐Ÿ“ฑ React-Native

This section is now co-authored with Benedikt

New 3D library for React Native in the works

๐Ÿฆ New 3D library for React Native in the works

One of the most inspiring things in the RN community is observing folks like Marc Rousavy, William Candillon and Christian Falch pushing the boundaries of whatโ€™s possible with this technology and going far beyond rendering text and buttons on a screen. With the recent Skia announcements, we saw the state of the art regarding 2D rendering in RN. Now, Marc provided a sneak peek of some exciting advancements in 3D rendering with RN. Apparently, Margelo is working on a new library to enable access to the native Graphics APIs (Metal/Vulkan) from RN. Apart from the short demo video, I also found this thread very interesting, where Marc explains their approach using a C++ library and why they didnโ€™t go with Three.js, which is amazing on web (React-Three-Fiber supports RN).



๐Ÿ”€ Other


๐Ÿคญ Fun

alt

See ya! ๐Ÿ‘‹

Did you find this article valuable?

Support Sรฉbastien Lorber by becoming a sponsor. Any amount is appreciated!