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!
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
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.
๐ธ React Component Analytics โ Omlet Scans Your Codebase to Measure Component Usage to Increase Code Quality and Design Systems Adoption
๐ฆ Next.js - new experimental.dynamicIO flag to end caching headaches: This flag will ensure components that perform async IOs like fetches and DB queries use dynamic rendering by default.
๐ฆ ChatGPT migrated from Next.js to Remix
๐ Vite 6 PR merged - Environment API: This is especially useful for React, as it properly models the different โenvironmentsโ React apps run on: browser, SSR, RSC, with separate module graphs.
๐ Next.js PR - Partial Fallback Prerendering
๐ TanStack Router - Virtual File Routes: Tanstack Start has its equivalent of Remix routes.ts.
๐ Next.js new docs - Progressive Web Applications (PWA)
๐๏ธ React-Brussels - ๐ง๐ช Brussels - 18 October - Get a 10% discount with code โTWIRโ. Come and learn from Nicolas Dubien and Charlotte Isambert !
๐๏ธ reactjsday - ๐ฎ๐น Verona - 25 October - Get a 10% discount with code "TWIR". An awesome line up announced with Matheus Albuquerque, Aurora Scharff and Dani Coll !
๐๏ธ Squiggle Conf - ๐บ๐ธ Boston - 03 & 04 October - Last call for tickets ! Donโt miss this event, and the โTWIRโ 10% discount code !
๐ React and FormData: advocates using FormData and provides practical solutions and TypeScript compatibility via Zod.
๐ Modern Data-Fetching in React: The article compares data-fetching methods like useEffect, useQuery, React Router loaders, Next.js getServerSideProps, Remix loaders, and React Server Components, highlighting trade-offs between client-side and server-side approaches.
๐ Oops, I accidentally made our website faster by switching to Remix: Echobind details migration story from Next.js/Vercel to Remix/Railway. They were only looking to save a few bucks and were surprised by the performance (Lighthouse score) and SEO improvements.
๐ Deploying a Next.js App to Production in any server: It does not give you all the optimizations Vercel provides, but itโs possible to deploy Next.js apps with docker and the standalone Next.js output mode.
๐ How to Show Task Sequence Progress with React Suspense and RSC in Next.js: Using the use hook.
๐ Expressive components in vanilla React, part 1: TypeStates: โThe choice isnโt really between building a state machine or not, itโs rather between building it implicitly or explicitlyโ.
๐ Preact or Svelte? An Embedded Widget Use Case: Sentry chose Preact over Svelte for their user feedback widget.
๐ Vercel - Whatโs new in React 19
๐ How to Use React Compiler
๐ MDX in Next.js
๐ Component auto import in Astro and MDX
๐ File uploads with Remix
๐ฆ Redwood v8.0: Background jobs, easier SSR/RSC setup, Vite for Storybook, Docker support, and key package updates, while deprecating Webpack
๐ฆ Remix 2.12 - Single Fetch improvements + future.unstable_optimizeDeps
๐ฆ React Router 6.26.2 - Update the unstable_dataStrategy API
๐ฆ Remix-the-web - Collection of packages for use with Remix or any web framework
๐ฆ Atomic-CRM - Full-featured free CRM built with React, react-admin, and Supabase
๐ฅ Wes Bos - Why did OpenAI move from Next.js to Remix?
๐ฅ Fireship - Front-end web development is changing, quickly (shadcn/ui, V0)
๐ฅ Theo - React's most dangerous feature (โuse serverโ)
๐ฅ Jack Herrington - ShadCNโs Revolutionary New CLI
๐๏ธ This Month in React August 2024 - Matt Pocock taught us to make modules, RN is faster, iterator helpers are cool, JSR/Deno going sour
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!
- ๐ฅ 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.
- ๐ฅ 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
See ya! ๐
