This Week In React #201 : TanStack, Remix, Next.js-SaaS-Starter, Astro, Redwood, Storybook, Conform...

#react #reactnative

Hi everyone!

Another week with many interesting React community articles, notably around the TanStack.

We also have cool React Native announcements such as Nitro Modules.

✍ Don't forget to sign this important petition: Oracle, it's time to free JavaScript

Also check our partner conf 🗓 React Summit US - 🇺🇸 New-York - 19 & 22 December. The great React Summit conference is back in the US for it's second edition!

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

💸 Sponsor

Uncover React Component Usage Across Your Dev Teams

☁️ Imagine being able to see exactly how and where devs are using specific React components so you can spot ways to reduce front-end tech debt and prove design system value. You can with Omlet.

Gain a central catalog of all the custom and reusable components you’ve used in production
Search and filter components by specific attributes to uncover what needs to be updated, debugged, or utilized more
Easily create and share custom charts with your team to show design system adoption, legacy code reduction, least/most used components and props, and more.

Get set up and run your first scan in <5 minutes. Try for free.

⚛️ React

TanStack news

I wasn't sure which headline to pick this week, so let's gather all TanStack-related news under one roof:

📜 Introducing TanStack Router: Great routing/navigation overview of this full-featured client-side framework that powers the upcoming TanStack Start framework (in alpha). It notably shines for its great typesafety for links, path segments and search parameters. I particularly like the idea of linking with to=”/users/$id” instead of to=”/users/123”.
📜 A milestone for TypeScript Performance in TanStack Router: Still related to TanStack Router, I also liked this post that dives deep into troubleshooting TypeScript performance problems in the language service, leading to slow IDE autocompletion.
📜 How Infinite Queries work: Dominik from React Query explains how Infinite Queries work under the hood, using an elegant code architecture with a pluggable behavior logic. He also explains how he fixed an historical bug that was only reported recently, caused by the retry logic.
👀 Clerk TanStack start SDK (beta): A third-party auth provider adding first-class auth support to the upcoming framework is a great sign of traction.

💸 React Bricks - Transform React components into dynamic, visually editable bricks of content with the pioneering React Visual Headless CMS.
🧑‍🎓 XState: Complete Getting Started Guide: Free comprehensive course on XState in a React context.
🖨 React 19 Cheat Sheet
🗓️ React-Africa - 🇲🇦 Casablanca - 29 November - Get a 10% discount with code “TWIR”. The full line up is now available, take a tour on the conference website !
🗓️ React Advanced London - 🇬🇧 London - 25 & 28 October - 10% discount with code TWIR. Full line-up revealed !
📜 Remix's concurrent submissions are fundamentally flawed (without causal ordering): Following the migration of ChatGPT from Next.js to Remix, the creator of Elixir argues that Remix submission and validation model is subject to race conditions. Ryan Florence plans to respond later. Note this is a more general problem affecting most client-side frameworks, although React 19 actions run sequentially and are not affected by it.
📜 How Remix's Flat File-Based Routing Works: Remix routing convention can be customized, but it comes with a default one that this post explains in details.
📜 Using callbacks to achieve better component decoupling in React: Short but important lesson on how to decouple a parent component from its children, by narrowing callback types instead of injecting a parent setState.
📜 SPA Lazy Loading Pitfalls: When using React Router with lazy routes and loader functions, you’d rather avoid co-locating your loader function with the component that receives its data because it creates a waterfall.
📜 LLM and RSC: A match made in Heaven: Uses OpenAI function/tool calls to implement an MVP of generative UI. The interactive demo can render an interactive React component during the chat session.
📜 Clean React with TypeScript: Long-time ReasonML user adopts TypeScript and shares a great overview on how to best type React components, state, refs and events. You might be familiar with most types, but it also covers more advanced patterns such as forwarding props with ComponentProps.
📜 Implementing Feature Flagging with the Next.js App Router: Implements a custom feature flag system based on env variables. It works for both client and server components.
📜 Search Params in Next.js for URL State: A good introduction to the nuqs library to implement typed search params to filter/sort a list of items.
📜 Redwood background Jobs: Details the new feature introduced in the recent 8.0 release. It’s notably useful to perform slower actions such as sending emails, without delaying user responses. Jobs are stored in a database and executed by a scheduler.
📜 Tailwind UI Radiant - A beautiful new marketing site template: New paid Next.js template from the Tailwind CSS team, but the launch blog post also explains interesting details, such as FramerMotion variant propagation.
📜 Don't Sleep on AbortController: Great vanilla JS article overall, including a cool React useEffect example
📦 Vite 6 beta: This comes with the new Environment API useful to support multiple module graphs for SSR and RSCs.
📦 Valtio 2.0: Valtio won’t handle promises anymore, you need to use React.use() now. This inspired me to create a demo showing how this pattern of storing promises could greatly simplify vanilla data fetching with less complexity than useEffect().
📦 Next.js SaaS Starter - Using Next.js 15, React 19 Postgres, Drizzle, Stripe, and shadcn/ui: I’m not that much into boilerplates (there are too many), but this one is created by Lee Robinson from Vercel, free, using cutting edge React 19 features with best practices in application.
📦 Astro 5.0 beta - stable Content Layer, Server Islands, astro:env
📦 Hono-Remix-Adapter
📦 Storybook 8.3 - Vitest integration, experimental Story globals
📦 Conform 1.2 - Input key prop no longer required
📦 Isograph 0.2 - Modern GraphQL client
📦 Relay 18.0 - @alias, @catch, editor integration improvements and more
📦 Shopify Hydrogen - September 2024 release - Improved sitemaps, search enhancements, localization, CSP fixes
🎥 Theo - We need to talk about Chrome's new API: Greatly introduces the new scheduler.yield() that landed in Chrome 129. It is useful for Concurrent React to split work into smaller chunks and give priority to the user inputs.
🎥 UI Engineering - Making setState() instant

💸 Sponsor

Amplify the benefits of JWTs and Session Tokens

Learn how leveraging the benefits of both session token authentication and JWTs results in the best of both approaches.

📱 React-Native

Nitro Modules

Marc Rousavy finally released his long-awaited framework for creating very fast native modules with a great DX. It is based on Nitrogen, a code generator that generates type-safe C++/Swift/Kotlin bindings from a TypeScript interface. Many TypeScript types are supported. Unlike other module solutions, it is able to bridge directly to Swift and Kotlin (from C++). A simple benchmark shows that Nitro Modules outperform ExpoModules and TurboModules on a simple operation. So far the community feedback from early adopters has been very positive, notably William Candillion using it on react-native-wgpu. Also worth reading Brent Vatne’s comment for why they didn’t adopt direct Swift C++ Interop in Expo modules (at least for now).