This Week In React #200 : Remix, React Universe, Next.js dynamicIO, :has, Redwood, MDX, Atomic-CRM, NewArch, Fusebox, Hermes, Gesture Handler...

This Week In React #200 : Remix, React Universe, Next.js dynamicIO, :has, Redwood, MDX, Atomic-CRM, NewArch, Fusebox, Hermes, Gesture Handler...


Hi everyone!

Cyril and Matthieu from Theodo Apps (formerly BAM) here 👋, standing in for Seb to bring you the latest news from the React and React Native worlds.

This week is all about Server Components, with new features related to them in Vite and Next.js. We also have a few articles on the topic that you might want to read. We also have a lot of Remix-related content and discussions related to the ChatGPT adoption.

On the React Native side, as planned, there were major announcements at React Universe, and React Native 0.76 is coming in a few weeks!

The React Native party is not over. Check our partner conf React Native 🇬🇧 London (14 & 15 November) and get a 10% discount with our code “TWIR”. It's the first edition, and they already have a great line-up including Charlie Cheever, Alex Hunt, Charlotte Isambert, and Cedric Van Putten.

Seb: I'll drop by quickly to celebrate the 200th edition of this newsletter 🎉. Thank you for reading us so faithfully all these years. At 43k subscribers, we're sustainable and on track to becoming a real media for developers.


💡 Subscribe to the official newsletter to receive an email every week!

banner


💸 Sponsor

Handsontable: Advanced data grid for your React app

Handsontable: Advanced data grid for your React app

Handsontable is a feature-rich data grid designed for React developers who need a powerful, customizable, and accessible solution to manage complex data.

  • A unique spreadsheet-like interface with sorting, filtering, and CRUD operations

  • Advanced operations like conditional formatting and 400 built-in formulas, similar to Excel

  • Customizable editors and renderers, allowing dropdowns, menus or custom components within grid cells to fit specific use cases

  • Optimized performance for smooth and responsive interactions

  • Accessibility with WCAG 2.1 compliance for better support for users with disabilities

Handsontable adapts to various use cases, from enterprise applications to simple websites, offering performance and flexibility trusted by companies worldwide.

Get started today!


⚛️ React

Josh Comeau - The Undeniable Utility Of CSS

CSS :has for React developers

This week we have 2 great articles about the new CSS :has selector, and how React developers can leverage it and simplify/delete their JS code while also improving performances. This new CSS feature had quite good support (92%) but can’t be polyfilled so for now you’d rather use it for subtle things and progressive enhancement.

Read in that order:

With great power comes great responsibility. Remember to keep your React components encapsulated, and avoid styles that leak outside component boundaries whenever possible.



💸 Sponsor

Unleash Document Superpowers in Your React Apps!

Unleash Document Superpowers in Your React Apps!

Attention React enthusiasts! 👋 Elevate your document game with the PSPDFKit React SDK:

  • 🏎️ Get started quickly with a free trial and extensive documentation

  • ⏱️ Save time developing by leveraging the slick built-in UI and Baseline-UI, our new design system

  • 🛠️ Leverage extensive APIs for processing and customization

  • 🆘 Make use of our support and solution engineering team to get help from domain experts

We've got you covered on all platforms from mobile to backend.

Want to work on challenging problems and have impact on hundreds of applications? Check out our open positions such as Senior Frontend Engineer.


📱 React-Native

Last week, Wrocław was the stage for React Universe, where major announcements thrilled the React Native community. One of the standout moments was the unveiling of React Native 0.76, set to launch by the end of October. This release brings significant advancements, including the New Architecture enabled by default and the introduction of completely revamped React Native DevTools. It’s already available as a 0.76 release candidate!

React Native DevTools

  • 🎥 Alex Hunt - The New React Native Debugger - Codename "Fusebox" Debugging tools for React Native have long been fragmented, but the new "React Native DevTools" introduces a unified experience with a new backend powered by the Chrome DevTools Protocol (CDP). This architecture, supported by IDEs and Chrome DevTools, promises more reliable breakpoints and stable reloads. It supports both the new and old architectures, positioning itself as the go-to debugging solution for React Native apps. Direct Hermes debugging via Chrome will be phased out, though performance and network inspection features are still in progress.

Hermes Performance Chart

  • 🎥 Tzvetan Mikov - Hermes: Better performance with runtime bytecode translation
    Static Hermes, introduced at React Native Europe last year, has sparked significant interest by challenging existing JavaScript engine standards. While still under development, Static Hermes offers a novel approach by compiling JavaScript into native machine code or typed bytecode through type annotation analysis, with the potential for C++-level performance. However, this workflow has its limitations: over-the-air (OTA) updates will no longer function, current JavaScript build tools like Babel do not retain type annotations, and there is still a considerable amount of untyped code in use. To address these challenges, the Hermes team has introduced runtime bytecode translation, which promises performance boosts of up to 12 times faster for native compilation. These innovations will be available in Hermes v2, once they have undergone extensive internal testing at Meta.


🔀 Other


🤭 Fun

alt

alt

See ya! 👋

Did you find this article valuable?

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