📨 #201: TanStack, Remix, Next.js-SaaS-Starter, routing, ?search, decoupling, LLM, Astro, Redwood, Storybook, Conform, Nitro Modules, RN CSS, Re.Pack, Swift, VisionOS, Lottie, Node.js, TypeScript, Vite, date-fns...

18 septembre 2024 · 12 minutes de lecture

Newsletter creator - Docusaurus maintainer

Salut à tous !

Encore une semaine avec de nombreux articles intéressants de la communauté React, notamment autour de TanStack.

Nous avons également des annonces intéressantes concernant React Native, comme les modules Nitro.

✍ N'oubliez pas de signer cette importante pétition : Oracle, il est temps de libérer JavaScript

Consultez également notre conférence partenaire 🗓 React Summit US - 🇺🇸 New-York - 19 & 22 décembre. La grande conférence React Summit est de retour aux États-Unis pour sa deuxième édition !

💡 Consulter cette newsletter sur Twitter - format visuel 🎨

Pour me soutenir:

😘 Recommande la newsletter! Ça m'aide vraiment beaucoup!
💸 Sponsorise la newsletter ou sponsorise-moi
🧵 Retweet le dernier thread Twitter
📨 Réponds à cet email
💬 Rejoins le chat Discord

Ne manque pas le prochain email !

I'm constantly finding interesting things to learn in there.

Dominik DorfmeisterWeb Developer - React-Query maintainer

💸 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

Les nouvelles de TanStack

Je ne savais pas quel titre choisir cette semaine, alors rassemblons toutes les nouvelles liées à TanStack dans un même endroit :

📜 Introducing TanStack Router : Excellent aperçu du routage/de la navigation de ce framework client complet qui alimente le futur framework TanStack Start (en alpha). Il se distingue notamment par son excellente sécurité pour les liens, les segments de chemin et les paramètres de recherche. J'aime particulièrement l'idée de lier avec to=”/users/$id” au lieu de to=”/users/123”.
📜 A milestone for TypeScript Performance in TanStack Router : Toujours en rapport avec TanStack Router, j'ai également aimé cet article qui plonge en profondeur dans le dépannage des problèmes de performance de TypeScript dans le service de langage, conduisant à une autocomplétion lente de l'IDE.
📜 How Infinite Queries work : Dominik de React Query explique comment les requêtes infinies fonctionnent sous le capot, en utilisant une architecture de code élégante avec une logique de comportement pluggable. Il explique également comment il a corrigé un bogue historique qui n'a été signalé que récemment, causé par la logique de relance.
👀 Clerk TanStack start SDK (beta) : Un fournisseur d'authentification tiers qui ajoute un support d'authentification de premier ordre au framework à venir est un excellent signe de confiance.

💸 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

Ne manque pas le prochain email !

It's exceptionally well curated, offers great insights and is well worth subscribing to!

Addy OsmaniHead of Chrome DX - Google

💸 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).