This Week In React #195 : Compiler, Refactoring components, XState Store, Next.js, Redwood, Vitale, Astro, LLMs, Astro...

Hi everyone!

Another calm week in the React world. No huge announcement, but many great community articles to read.

Node.js v22.6 is out with experimental TypeScript support! 🎉

Check our partner React Universe Conf (🇵🇱 Wrocław - Sept 5-6), formerly named React Native EU. Get a 10% discount with code "TWIR". They really have a stunning speakers lineup this year!

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

💸 Sponsor

WorkOS: Modern Identity Platform for B2B SaaS

With WorkOS you can start selling to enterprises with just a few lines of code.

🔐 WorkOS AuthKit 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.

✨ AuthKit is free up to 1 million MAUs and includes bot protection, MFA, RBAC, & more.

🤝 WorkOS is trusted by hundreds of leading startups like Perplexity, Vercel, & Webflow.

Get started with WorkOS 🚀

⚛️ React

💸 Reactile – a new approach to React-based web apps. Create your own views. Let it handle your windows and widgets in a single browser tab
🐦 Zuckerberg calling out React as one of Meta’s major open source initiatives
🐦 Visual editing with ReactBricks using RSC
📖 Revised ”Redux Essentials" tutorial
🗓️ React-Africa - 🇲🇦 Casablanca - 29 November - Line up is online, check, and apply a 10% discount on tickets with code TWIR !
📜 React Compiler, How Does It Work?: A 4-part series going really deep on the React Compiler code, explaining the Babel Plugin, useMemoCache, HIR/SSA transformations. That’s a lot of implementation details to read, and very technical, but there are also great overviews that describe the main algorithms at the end of each post. It operates on individual functions, with an AST “lowered” to a Hight-level Intermediate Representation (HIR) that also permits to decouple the compiler from Babel. A quite advanced piece of technology!
📜 Avoiding premature abstraction with Unstyled React Components: Sam refactors a concrete Form button to a headless LoadingButton abstraction that remains flexible and doesn’t prematurely abstract styling. I agree, and once time comes you can still create another styled abstraction on top.
📜 Common Sense Refactoring of a Messy React Component: Alex explains his process to refactor a bloated real-world Form component. I do the same: extracting sub-components, custom hooks, and helper code from the main component usually improves clarity.
📜 Introducing XState Store: Dominik (React Query) likes Zustand, but explains why he now finds XState Store a more compelling option. It’s quite similar but more opinionated (separate state/actions, event-driven…). Daishi answered you can get a similar interface with his new Zustand-xs middleware. I explained (tweet) why I’m not always a fan of an event-driven interface.
📜 Using Notion as my CMS with Next.js: Describes a setup to reduce the friction of creating and publishing notes. Notion content is first converted as Markdown, and then renderer in a Next.js app.
📜 Next.js’s unstable_cache() demystified: Some notes on the dangers of returning classes, and a link to an interesting related article/package listing even more caching gotchas.
📜 Build your own React state management library in under 40 lines of code: Creates a custom external store and reads it in React with… useSyncExternalStore + 2 improvement suggestions such as adding an Immer integration.
📜 GitHub Vitale - Live notebooks in VS Code for JavaScript/TypeScript, web development, and AI experimentation: The GitHub Next team introduced a new Notebook technology (like Jupyter) for interactive exploratory coding based on Vite. It supports rendering a React component in a notebook cell.
📜 Frontend Security Checklist: Includes examples of mitigating XSS and CSRF attacks in a React context.
📜 The Art of Dithering and Retro Shading for the Web (with React Three Fiber)
🔨 Dédale - Email template development environment, based on React Email
📦 Redwood 8.0 RC: New version of the full-stack React framework is now in release candidate. It adds SSR and RSC support (experimental), Vite 5, Prettier 3. See the v8 upgrade guide. They also plan to introduce soon a Background Jobs feature.
📦 Vercel AI SDK 3.3 - useChat() supports file attachments, useObject() streams structured data: With structured data based on Zod schemas, LLMs are getting easier to use for devs. Note that OpenAI also announced support for structured output with Zod support!
📦 Astro 4.13 - stable request rewriting, stable content collections JSON schemas
📦 react-three/xr 6.1 - WebXR Anchor API, Hit Testing API, DOM Overlay API, experimental Emulator
📦 Tldraw sync - self-hostable real-time collaboration engine for React whiteboard drawing app
🎥 Theo - Server Islands are really cool
🎥 Jack Herrington - NextJS Feature Flagging Made Easy
🎥 UI Engineering - Why React is Declarative?
🎥 Expo - What React devs need to know about React Native
🎙️ Syntax - Why the jQuery Creator Uses React and Typescript - John Resig
🎙️ This Month in React - July 2024 - State of JS, React, HTML

💸 Sponsor

Let's meet at React Universe Conf 2024

React Universe Conf is two incredible days of learning, networking, and innovation in the heart of Europe. Formerly known as React Native EU, React Universe Conf is now the ultimate gathering for React and React Native enthusiasts. What's in it for you this year?

Exceptional lineup: Dan Abramov, Evan Bacon, Kent C. Dodds, Delba de Oliveira, Marc Rousavy, and many other great speakers.
Hot topics: New architecture, React Server Components, Static Hermes, and Out-of-Tree platforms.
Practical insights on cross-platform app development with React Native.

Use promo code TWIR for 10% discount on your ticket. Book your spot HERE and see you in Wrocław!