📨 #192: Fog of War, react-html, Memory leaks, Suspense, security, chadcn/ui Charts, MUI, XR, Filament, Rise, Expo, React Navigation, Reanimated, Node, TypeScript, pnpm, Vitest...
Hi everyone!
The newsletter is back after a well-deserved 2-weeks break!
So we're covering three weeks of news in one issue, and there are too many links to squeeze into one e-mail, so I had to filter out the news more aggressively. Despite the holiday season, we had a lot of great community React articles, and quite interesting React Native news!
If you really like the exhaustive side of this newsletter, I'd encourage you to check the online version this time: it exceptionally contains extra sections with twice more links that you might still find interesting. This also gives you a hint of the value I provide: the work you don't see is all the articles that I gathered and read/skimmed over and had to filter out.
Check out our partner conf React-Brussels (🇧🇪 Brussels - 18 October), offering us a 10% discount with code “TWIR”. Some speakers have already been revealed!
💡 Check this newsletter on Twitter - visual format 🎨
To support me:
- 😘 Recommend the newsletter to your friends: it really helps!
- 💸 Sponsor the newsletter
- 🧵 Retweet the latest Twitter thread
Don't miss the next email!
💸 Sponsor
The Category-Defining React Grid for Your Enterprise
Data grids are complex components of web applications, but current solutions are inefficient, require a lot of maintenance, and perform poorly. Graphite Grid transforms the landscape with two key features: retargetable rendering and reactive signal state.
Graphite Grid separates grid state from view logic, allowing a single unified state model to support a variety of render targets, declaratively or imperatively. It includes a DOM and Canvas renderer, giving developers flexible, high-performance options 🚀.
Graphite Grid is declarative and consistent, leveraging state signals to ensure seamless integration with your application. Designed with React in mind, it is the only JavaScript data grid built with React's state management primitives. Try it now!
⚛️ React
We already featured this in our last issue, but there’s now a dedicated blog post that greatly explains what it’s all about. A new React Router feature enables you to split your route manifest in chunks. This article explains how it has been integrated in Remix 2.10 and what are the tradeoffs. It turns out a route manifest can grow quite large, and if you don’t split it, it might delay your app’s React hydration because it has to be downloaded upfront. If you have a medium/large Remix or React Router site, I’d recommend to check the size your route manifest immediately, and think about logical ways to split it, because the size reduction this new feature enable can have a significant perf impact. Shopify’s initial manifest went from 10MB to 1.9KB! The Docusaurus website manifest is also 200KB and I definitively plan to implement this.
- 💸 Meilisearch — Build fast, typo-tolerant search with React
- 👀 React Core PR -
ReactHTML.renderToMarkup: A newreact-htmlpackage is being introduced for producing HTML that’s not meant to be hydrated (like emails). It’s the successor ofrenderToStaticMarkup, supporting modern features like Suspense. - 👀 React Core PR -
React.captureOwnerStack(): From many PRs I see, a lot of effort is going on in the React repo to improve debugging, logging, and producing readable “component owner stack traces”. This new public API should be useful for framework authors to display an error dialog. - 👀 Next.js PR - TypeScript config file (
next.config.ts): A welcome improvement for DX to have first-class TypeScript support in config files, not anymore limited to JSDoc comments. - 🗓️ React Rally - 🇺🇸 Utah - 12-13, August - Get a 10% discount with code "TWIR". An awesome line up announced with Kent C. Dodds, Cory House, Joel Hooks, Tejas Kumar.
- 📜 Sneaky React Memory Leaks: How the React compiler won't save you: This closes a great 3-part series on memory leaks in React. Kevin found a case where using the React Compiler would actually introduce a memory leak to code that wouldn’t leak otherwise. Using bind might be a decent workaround. Note that these memory issues are not limited to React, but happen due to using functional programming and closures in JS in general.
- 📜 How to Simplify Component Imports with TypeScript Namespaces: I admit I didn’t know this quite pragmatic React + TypeScript trick that Matt Pocock also approves.
- 📜 How to protect against a security breach in React Server Components: Greatly illustrates that validating with Zod is not enough, and it’s important to check access control for any server action input.
- 📜 WorkOS - Migrating to Next.js App Router with zero downtime: An incremental migration from pages to App Router does not give a great navigation UX. They found a clever way to expose the same app as both Pages Router and App Router, with the ability to switch routers through a query string param.
- 📜 Enhancing The New York Times Web Performance with React 18: They migrated from React 16 and see great benefits such as fewer re-renders and improved INP score. Also encountered some challenges due to stricter hydration requirements.
- 📜 Learn Suspense by Building a Suspense-Enabled Library: Creates a suspense-enabled
useFetch()hook to broadly demonstrate how real-world libraries work. - 📜 All About That Button, ’Bout That Button: Remix encourages writing mutations as declarative HTML that works “before” JS, and other interesting button-related progressive enhancement things.
- 📜 Secret knowledge to self-host Next.js: Guide with everything you need for deploying production Next.js outside Vercel.
- 📜 5 Misconceptions about React Server Components
- 📦 chadcn/ui Charts - Collection of beautiful chart components, built using Recharts
- 📦 Material UI 6.0 beta - Pigment CSS build-time CSS-in-JS support (optional), container queries
- 📦 react-three/xr 6.0 - AR/VR for react-three-fiber
- 📦 Motion-Primitives - Beautifully designed motions components based on Framer Motion
- 🎥 Jack Herrington - Warning: React 19's use Hook Can Impact App Performance: TIL about a surprising React implementation detail when it first encounters a “use” hook.
- 🎙️ PodRocket - React Compiler with Sathya Gunasekaran and Joe Savona
Extras:
- 👀 Next.js PR - onRequestError in instrumentation.js
- 💬 Why Vercel created Turbopack instead of using Vite
- 📜 The Secret to Maintainable Remix Apps: Hexagonal Architecture
- 📜 Can you modify React Props?
- 📜 Demistifying cache in Next.js
- 📜 How much code can Tanstack Query save
- 📜 The Experience of Deploying Next.js Apps on Cloudflare
- 📜 Preparing for React 19: a guide for WordPress 6.6 users
- 📜 A pragmatic guide for adding React to an existing Rails application (and still use Hotwire)
- 📜 Next.js and cache poisoning: a quest for the black hole
- 📜 Security advice for self-hosting Next.js in Docker
- 📜 Nested arrays and objects in Form Data with Conform
- 📜 React Form Button
- 📜 Extra Arguments for Server Actions in React Forms
- 📜 Next.js createPage helper with loader pattern
- 📜 How Zustand Was Born
- 📜 The React useRef Hook: Not Just for DOM Elements
- 📜 Path To A Clean(er) React Architecture (Part 7) - Domain Logic
- 📦 Headless UI React 2.1 - Simplified transition API and improved multi-dialog support
- 📦 Storybook 8.2 - beforeAll test hook, enhanced play function, portable stories, new onboarding
- 📦 React Flow 12.0 - SSR support, Computing flows, dark mode
- 📦 Hono 4.5 - React 19 Compatible APIs
- 🎥 Dave Gray - Toast Notification Patterns with Next.js Server Actions and next-safe-action
- 🎥 Lazar Nikolov - Implementing Clean Architecture Patterns in Next.js
- 🎥 Jolly Coding - NextJS 'use server' Trap (Accidentally Leaking Data)
- 🎥 Olivier Larose - GSAP vs Framer Motion for React
- 🎙️ This Month in React - React 19 delayed (drama-ish), why no JS Laravel, TS 5.5…
Don't miss the next email!
💸 Sponsor
WorkOS: Modern Identity Platform for B2B SaaS
With WorkOS you can start selling to enterprises with just a few lines of code.
🔐 WorkOS supports a complete User Management solution along with SSO, SCIM, RBAC, & FGA.
🏗️ The APIs are flexible, easy-to-use, and modular. Pick and choose what you need and integrate in minutes.
🎨 Design and user experience are everything. From the quality of our documentation to how your users onboard, we remove all the unnecessary complexity for developers.
✨ User Management is free up to 1 million MAUs and includes bot protection, impersonation, MFA, & more.
🤝 WorkOS is trusted by hundreds of leading startups like Perplexity, Vercel, & Webflow.
Future-proof your auth stack with WorkOS 🚀
📱 React-Native
The Margelo team released an impressive new real-time physically based 3D rendering engine for React Native, based on Google Filament. It’s GPU-accelerated by Metal/Vulkan, rendered on a separate thread, works with Reanimated, and already supports the New Architecture and Expo. The readme explains well how it differs from existing 3D solutions based on expo-gl (expo-three and react-three-fiber RN). With Skia and Filament, the future looks bright for React Native's 2D/3D capabilities.
A brand-new solution to create Server Driven UIs in React Native, that allows you to deploy new views on the server without rebuilding/resubmitting your app (or even ship an OTA update). It looks philosophically very close to the React Server Components model, but with slightly different tradeoffs: at the cost of some additional manual wiring, this new solution is framework and language agnostic thanks to a protocol that defines how views are serialized. It's still early days, but it looks promising.
- 💸 RevenueCat Paywalls - Easy remotely configurable paywalls for React Native apps
- 📣 React Native 0.76 - Android minSdk will bump to Android 7.0 (API 24)
- 👀 More-reacty-native-demo: Evan Bacon experiments on exposing native views as lowercase intrinsic JSX elements that can be used directly without importing them, like divs on the web.
- 📖 Reanimated Cookbook - Real-life examples to help you learn
- 🗓️ The Geek Conf - 🇩🇪 Berlin - 18 & 25 July - Get a 10% discount with code "TWIR". Last day tickets for tomorrow remote events !
- 📜 Expo - Increase iteration speed with PR previews: New feature integrates EAS Updates with GitHub to automatically post OTA updates as PR commit status. A great DX, similar to what Vercel/Netlify offer on the web, but for mobile! My only wish is that they post a QRCode in a sticky PR comment.
- 📜 Use a framework to build React Native apps: The React Native team finally officially endorses the use of Expo! If you don’t use a framework, you are probably building one.
- 📜 From Web to Native with React: Kadi from Expo created a great resource to help web devs learn React Native, including a comparison between intrinsic React DOM and React Native elements, how the flexbox model is a little bit different, errors to avoid, new native things to learn, and overall a great overview of anything to be aware of related to React Native or Expo.
- 📜 Microsoft - Building React Native for Windows Apps from a Mac: Owning a Wndows PC is not required, and you can use a Windows VM through Microsoft Dev Box or Parallels.
- 📜 App clip with React Native and New Arch (and Swift)
- 📜 Bringing native AI to your mobile apps with ExecuTorch - Part 2, Android
- 📜 Introduction to the React Native OMH Maps Library
- 📦 React Navigation 7.0 RC: The final 7.0 release is coming, and I’m particularly excited by the Static API and the introduction of a screen preloading API. This is a first step toward great upcoming perceived performance improvements, that could later leverage upcoming Concurrent React features like notably
<Activity>. - 📦 FlashList 1.7 - New Architecture support!
- 📦 Yoga 3.1 - gap in %, layout conformance and regression fixes
- 📦 Reanimated 3.13 - New Architecture, Tabs Shared Element Transitions
- 📦 React Native Primitives - Unstyled universal components with a focus on accessibility
Extras:
- 🐦 React Native running on Meta Quest demo
- 🐦 Expo running on Daylight DC-1 devics demo
- 👀 Flutter-Brownfield - a proof-of-concept for adding React Native to an existing Flutter app
- 📜 Rebuilding a 10 year old iOS app with Expo
- 📜 Building an Image Slider in React Native using Skia and Reanimated
- 📜 Publishing dual module ESM libraries
- 📜 How To Implement Local Storage In Your Expo App?
- 📜 Empowering Users: Developing Accessible Mobile Apps using React Native
- 🔗 Awesome-react-native-ui - list of react native animations created by the community
- 📦 React Native 0.75 RC.5
- 🎙️ Rocket Ship 44 - Yoga, Layouting and New Architecture with Delphine Bugner
- 🎙️ Rocket Ship 45 - React Native Apps for Seafarers with Gabriel Dierks
- 🎙️ RNR 301 - RNR Explains: Using Native Driver for Animated
- 🎙️ RNR 302 - Landing a React Native Job with Taylor Desseyn
- 🎥 Simon Grimm - From React to React Native in 12 Minutes
- 🎥 Simon Grimm - React Native vs Flutter - Which should you use?
🔀 Other
- 👀 TypeScript 5.6 Iteration Plan
- 📜 Ecma International approves ECMAScript 2024 - What’s new?
- 📜 Speeding up the JavaScript ecosystem - Isolated Declarations
- 📦 Node 22.4 - experimental Web Storage support (localStorage/sessionStorage)
- 📦 Node 22.5 - experimental node:sqlite module
- 📦 pnpm 9.5 - New “catalogs” feature
- 📦 Vitest 2.0 - better Browser Mode
Extras:
- 🔐 Polyfill.io supply chain attack hits 100K+ sites
- 📣 Astro + Netlify - Official Deployment Partners
- 📜 How To Hack Your Google Lighthouse Scores In 2024
- 📜 It’s about time I tried to explain what progressive enhancement actually is
- 📜 What's coming next for ESLint - Language-agnostic, core rewrite
- 📜 Is TypeScript Just A Linter?
- 📜 A guide to reading and writing Node.js streams
- 📜 TypeScript 5.5 - A Blockbuster Release
- 📦 StackBlitz pkg.pr.new - Continuous (Preview) Releases for your libraries
- 📦 fetch-super-headers - A drop-in replacement for JavaScript
Headerswith type-safe access - 📦 Deno 1.45 - Workspace and Monorepo Support
- 📦 Rspack 1.0 Alpha - Smaller outputs, module concat, Lightning CSS, lean core
- 📦 Mako - New fast bundler based on Rust
- 📦 Facebook memlab - Find JavaScript memory leaks, analyzing heap snapshots
🤭 Fun
See ya! 👋
Don't miss the next email!
