📨 #188: React 19 RC0, Data Fetching, Framer Motion, Compiler, Astro, Zod, Remix, Docusaurus, React-Query,, Memory Leaks, Spline, Module Mocking, Slow Networks, MS Edge, RN Security Guide, RN 0.74.2, Reanimated 3.12, Turborepo 2, Biome 1.8...
Bonjour,
Cette semaine, c'est Benedikt qui remplace Sébastien, qui fait une pause dans sa newsletter.
React 19 approche de sa version finale, avec la première RC publiée cette semaine. En dehors de cela, il n'y a pas beaucoup d'activité de nouvelle version dans les communautés React et React Native. Cette semaine, j'ai donc décidé de présenter deux contenus importants en gros titres dans les deux sections. Un article de référence de 10 000 mots sur les modèles de récupération de données dans les applications Single-Page par Juntao Qiu, et un excellent aperçu vidéo de toutes les différentes façons de construire des applications React Native avec Expo par Simon Grimm.
Je voulais profiter de cette occasion pour vous dire que Sébastien et moi-même faisons beaucoup d'efforts pour trouver le meilleur contenu pour les sections React et React Native, mais je suis sûr qu'il y a encore d'excellentes choses qui passent parfois inaperçues. C'est pourquoi nous sommes toujours ouverts aux suggestions, alors n'hésitez pas à nous faire savoir si vous avez quelque chose à nous proposer !
💡 Check this newsletter on Twitter - visual format 🎨
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 !
💸 Sponsor
Product for Engineers is PostHog’s newsletter dedicated to helping engineers improve their product skills. Learn what questions to ask users, how to build new features users love, and the path to product market fit.
Subscribe for free to get curated advice on building great products, lessons (and mistakes) from building PostHog, and deep dives into the strategies of top startups.
⚛️ React
📜 Data Fetching Patterns in Single-Page Applications
C'est une longue lecture (~10 000 mots), mais c'est un excellent article ! Le titre ne lui fait pas honneur, parce qu'au passage, il couvre bien plus que le simple data fetching. Les concepts de base de React, Suspcense, la gestion de l'état asynchrone, le découpage du code, le prefetching, et la récupération de données en parallèle pour éviter les waterfalls. Il y a eu beaucoup de discussions sur X à propos de la performance des web apps ces dernières semaines (Rails vs. React, MS Edge decision, ...) - c'est un excellent article pour rappeler les bases de ce sujet afin de construire une excellente expérience utilisateur !
- 💸 Meilisearch - Build search as you type for React
- 👀 React Router PR - defineRoute API
- 🐦 shadcn/ui is working on adding charts
- 🐦 Remix working inside a Cloudflare Durable Object 🤯
- 🐦 React 19.0.0-rc.0 : Andrew Clark déclare « C'est la version exacte que nous publierons en tant que 19.0, sauf si un problème est signalé nécessitant un changement radical ».
- 🐦 Upcoming Spline (3D rendering) and NextJS RSC integration
- 📜 I tried React Compiler today, and guess what … : Un article super intéressant et détaillé sur React Compiler et les cas d'utilisation dans le monde réel. Nous ne sommes pas encore arrivés au point où nous pourrons ignorer tout ce qui concerne la mémoïsation parce que le Compilateur s'en chargera, et en dehors de cette conclusion, l'article est aussi un excellent rappel de la façon dont la mémoïsation fonctionne exactement.
- 📜 Do you still need Framer Motion? : Le créateur de la célèbre bibliothèque d'animation React explique que vous pourriez ne plus avoir besoin de sa bibliothèque grâce à 5 grandes nouvelles fonctionnalités CSS.
- 📜 Sneaky React Memory Leaks II: Closures Vs. React Query : Cet article fait suite à celui de la semaine dernière. Cette fois-ci, il montre comment React Query peut également être affecté par des fuites de mémoire, et comment les corriger. L'utilisation de custom hooks semble être une bonne solution générale à ce problème.
- 📜 An even faster Microsoft Edge : Microsoft utilisait React pour certains éléments de l'interface utilisateur de son navigateur Edge et abandonne désormais cette approche. Voir la vidéo ci-dessous pour plus de détails.
- 📜 Speeding up the JavaScript ecosystem - Server Side JSX : Le runtime JSX de React peut conduire à de nombreuses allocations d'objets. Marvin (Preact/Deno) montre qu'il est possible de précompiler JSX pour améliorer le rendu serveur de JSX et réduire le GC (Garbage Collection). Peut-être que React pourrait utiliser cela aussi ?
- 📜 Type-safe module mocking in Storybook : Une façon très élégante d'exploiter les imports de sous-chemins pour le module de mocking.
- 📜 Multiple action handlers with Zod in Remix : Si vous ciblez un endpoint d'action à partir de plusieurs composants, cet article vous montre comment combiner les différents schémas Zod via l'union discriminée.
- 📜 Embracing Slow Networks: Improving User Experience
- 📜 Cleaner components with useSuspenseQuery & Why useSuspenseQuery works
- 📜 Explore new hooks coming up in React 19
- 📦 React 19.0.0-rc.0 : Andrew Clark déclare « C'est la version exacte que nous publierons en tant que 19.0, sauf si un problème est signalé nécessitant un changement radical ».
- 📦 Docusaurus 3.4 : Une nouvelle façon de gérer les tags de façon centralisée (idéal pour la cohérence), un routeur de hash expérimental (idéal pour la navigation hors ligne sans serveur web), et une option pour utiliser les espaces de noms pour le stockage local (utile si vous déployez plusieurs instances de Docusaurus sur le même domaine).
- 🎙 This Month in React, May 2024 - Updates from React Conf
- 🎥 Jack Herrington - Beware of "auto" Mode in the NextJS App Router
- 🎥 Theo - Microsoft Regrets Using React (For Edge)
- 🎥 Stephanie Dietz - How to Use React's
useOptimisticHook - 🎥 UI Engineering - Why 95% of Modals should be Local (in React)
- 🎥 Aaron Francis - Laravel vs React
- 🎥 Theo - How React Query Won
Ne manque pas le prochain email !
💸 Sponsor
WorkOS: enterprise-grade auth in minutes
🔐 WorkOS supports a complete User Management solution along with SSO, SCIM, RBAC, & FGA.
🗂️ Unlike other auth providers that rely on user-centric models, WorkOS is designed for B2B SaaS with an org modeling approach.
🏗️ The APIs are flexible, easy-to-use, and modular. Pick and choose what you need and integrate in minutes.
✨ 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
🎥 Every Way to Build your React Native App with Expo
Tous les chemins mènent à Rome, et il semble qu'il y ait presque autant de façons de créer une application Expo. Cela nous donne, à nous développeurs, beaucoup de pouvoir et de liberté, mais peut aussi parfois mener à la confusion - et pas seulement pour les débutants ! Heureusement, Simon a réalisé une excellente vidéo comparant les différentes approches via Expo Go, Expo Prebuild, Xcode, Android Studio et EAS. C'est aussi l'occasion de féliciter Expo pour avoir atteint les 30k étoiles sur GitHub !
- 💸 React Native Mastery - The only course you need to Master React Native & Expo
- 🐦 The most powerful demo AI app, featuring RSC via Expo Router : Nous avons déjà parlé de la démo RSC d'Evan Bacon. Il s'agit d'un excellent fil de discussion sur X qui résume les promesses et inclut une belle vidéo de comparaison sur la qualité de l'interface utilisateur mobile, en particulier dans le contexte des applications de chat LLM.
- 📜 React Native Security Guide : Oscar aborde un sujet dont on ne parle pas assez. Il s'agit d'une bonne introduction, qui couvre les secrets (TLDR : ne les stockez pas sur un appareil) et le cryptage des données utilisateur (y compris l'exploitation de la biométrie).
- 📜 Seamless Transitions: From Native to React Native : Quelques encouragements pour la réhabilitation d'ancien développement : Comme RN crée des applications véritablement natives, l'introduction de RN dans une application existante ou la migration vers RN peut se faire de manière transparente pour les utilisateurs finaux.
- 📦 React Native 0.74.2 : Mise à jour corrective, apportant quelques dépendances (typescript-eslint, CLI) et corrigeant des bugs.
- 📦 React Native Reanimated 3.12.0 : Introduction d'un nouveau hook useComposedEventHandler qui simplifie la fusion de plusieurs gestionnaires d'événements.
- 🎙️ RNR 298 - Create Expo Stack, NativeWind Ul, & Plugin Pro with Dan Stepanov
- 🎥 Rocket Ship 42 - React Native is alive! App.js Recap with Áron Berezkin
- 🎥 Expo - How to start your first Expo project in 2 minutes
🇫🇷 En français
- 🇫🇷 ReactHebdo.fr - Dernières éditions traduites en français
- 📜 Les nouveautés de Google IO 2024 : CSS, HTML et performance
- 🎥 Pourquoi Tailwind est détesté ?
🔀 Autre
- 🐦 Find memory issues using Chrome Dev Tools
- 👀 Vitest Browser Mode
- 📜 10 modern Node.js runtime features to start using in 2024
- 📜 Live types in a TypeScript monorepo - stop writing dead TypeScript
- 📜 How To Use Corepack
- 📜 Promises From The Ground Up
- 📜 Zero - Rethinking local-first, general-purpose sync engine for the web
- 📦 Turborepo 2.0 - New terminal UI, watch mode, all-new docs
- 📦 Biome 1.8 - CSS support, new reports, CLI improvements...
- 📦 Deno 1.44 - Private npm registries, improved Node.js compat, and performance boosts
🤭 Fun
A plus 👋
Ne manque pas le prochain email !
