📨 #143: RSC Quiz, useFormStatus, Next.js Website, Panda CSS, useLayoutEffect, Million.js, Immer, Super Apps, React-Three-Fiber, Vite...

Salut à tous !

On a beaucoup de bons articles React cette semaine, mais aussi quelques belles releases. J'ai bien aimé le breakdown des animations sur le nouveau site Next.js, et découvrir la nouvelle librairie Panda CSS.

On sent que React devient de plus en plus un framework avec les Server Components. Un nouveau hook useFormStatus pointe le bout de son nez.

Callstack nous propose une belle resource sur les Super Apps en React-Native.

Il y a eu une grosse vague de licenciements chez Meta, qui a aussi touché quelques développeurs de notre écosystème 😓. N'hésitez pas à contacter ceux qui sont en recherche d'une nouvelle opportunité.

J'ai réorganisé le chat Discord. Pour le rendre plus actif, j'ai passé la majorité des canaux en Anglais, et on va accueillir nos confrères internationaux.

💡 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 !

If every newsletter was as informative, the world would be a better place!

Mike GrabowskiCTO and founder - Callstack

💸 Sponsor

React-admin - Le Framework Open Source d'applications B2B

Vous êtes en train de développer une admin avec React? Si oui, la suite va vous intéresser ! En utilisant React-admin, notre framework open-source, vous pouvez vous épargner des jours de développement ! 🤩

Avec React-admin, vous pouvez non seulement gagner un temps précieux, mais vous pouvez également devenir un meilleur développeur! Fort d’une communauté de 20 000 développeurs qui l'utilisent quotidiennement et d’une équipe technique dédiée, le projet grandit de jour en jour.  Consultez le témoignage de  Caritas pour vous faire une idée des possibilités offertes par le framework.

Rejoignez notre communauté florissante ainsi que le serveur Discord, afin de rester au courant des dernières mises à jour de React-admin et d'obtenir l’aide d'un réseau de développeurs expérimentés.

Testez le dès maintenant en moins de 30 minutes !

⚛️ React

Crafting the Next.js Website

Vous avez peut-être remarqué la nouvelle landing page de Nextjs.org? Rauno travaille chez Vercel et nous propose de déconstruire les subtilités de cette page. Perso j'adore leur technique de gradient tracing! Une implémentation React intéressante avec un super résultat.

Panda CSS – CSS-in-JS without Runtime Overhead

Panda CSS est une nouvelle librairie CSS-in-JS sans runtime en cours de développement pour le futur de Chakra UI. La doc Panda n'est pas encore disponible, mais cet article donne premier aperçu pragmatique dans un contexte Next.js.

• 👥 Nouvelle vague de licenciements chez Meta qui touche aussi des profils tech open-source, dont Mengdi Chen (React DevTools), Robert Balicky (Relay), Matt Carroll (DevRel React, en recherche d'un nouveau poste) et Sean Keegan (DevRel React, en recherche d'un nouveau poste).
• 👀 React PR - experimental_useFormStatus: un nouveau hook useFormState() pourrait arriver dans React, dont la signature est inspirée de Remix useNavigation().
• 👀 React.dev translation update: les repositories de traduction de la nouvelle doc sont à jour. Il est possible de commencer à traduire la nouvelle doc.
• 🧵 Dan Abramov's RSC Quiz: un thread super intéressant qui pourrait vous aider à avoir une meilleure intuition sur le fonctionnement des Server Components.
• 🧵 Dan Abramov on the origins / inspirations of React Server Components (PHP/Hack/XHP)
• 🧵 useLayoutEffect + queueMicrotask: mon astuce qui a suscité plus d'intérêt que je ne pensais 😄
• 🐦 Dan Abramov on using Preact Signals: cette librairie patch React, qui ne peut garantir son bon fonctionnement si vous décidez de l'utiliser.
• 📜 Why You Don't Need Signals in React: Daishi explique que les signaux sont caractérisés par 2 éléments: réactivité, et bypassing du diffing. Il propose d'utiliser Jotai pour la réactivité, et de ne pas chercher à bypasser le diffing.
• 📜 Creative ways of using useReducer: met en avant 4 manières originales d'utiliser useReducer: toggle, increment, formatting du state et merge du state.
• 📜 Where to host your Remix app in 2023: bonne analyse avec une matrice comparative pour choisir son hébergeur.
• 📜 Securing your Next.js 13 application: montre comment sécuriser son app Next.js avec des headers, et propose une implémentation détaillée pour CSRF.
• 📜 Can Rust Beat Javascript in 2023?: les frameworks web basés sur Rust et WebAssembly ont bien progressé dans les benchmarks. Cet article montre aussi qu'ils ont un modèle assez similaire à React.
• 📜 Say no to "flickering" UI: useLayoutEffect, painting and browsers story: propose d'implémenter un menu de navigation responsive, et explique comment un useLayoutEffect synchrone permet de fixer un problème visuel du 1er rendu. Mais pour le SSR, ce n'est pas si simple!
• 📜 Display a view counter on your blog with React Server Components: remplace SWR par RSC pour afficher un compteur de vues. Ajouter un Suspense autour du compteur permet de ne pas bloquer le rendu.
• 📜 How we built the Storybook Day 3D animation: explications sur la création d'une scene 3D avec React-Three-Fiber.
• 📜 Storybook Community Showcase 5
• 📜 The Evolution of React Rendering Architectures & Web Performance
• 📜 Integrating React Flow and the Web Audio API
• 📦 Vite 4.3: grosses améliorations de perf sur un benchmark avec 1000 composants React.
• 📦 Redux Toolkit v2.0.0 alpha.5: nouvelle API combineSlices pour lazy-loader les reducers.
• 📦 T3 Env: nouvelle solution pour parser les variables d'environnement avec Zod, avec une intégration Next.js.
• 📦 React-Three-Offscreen: permet le rendu 3D React-Three-Fiber dans un web worker via un OffscreenCanvas, pour ne pas bloquer le thread principal.
• 📦 Million.js 2.3.0: support de Next.js et intégration optimizer Forgetti. Un nouveau package Hundred.js pour comprendre le fonctionnement du "block virtual DOM".
• 📦 Immer 10.0: plus rapide, plus léger.
• 📦 Lingui 4.0
• 📦 Micro Frontends Next Generation - A React Server Components Playground
• 📦 Simple RSC, Deno Edition
• 🎥 Next.js Image Component Just Got Way Better: usage de Cloudinary Image dans une app Next.js. J'en profite pour remercier James qui me fait de la pub 🤗.
• 🎥 React and TypeScript Stopped Fighting?
• 🎥 How To Fix NextJS 13's N+1 Problem

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

Tina.io is a headless CMS for Markdown-powered sites

• Editing UI for your Markdown files
• UI for MDX components
• Supports static (SSG) and server-side rendering (SSR)
• Option for visual editing (live-preview)
• Build with reusable blocks

Test a starter site

• Docusaurus (Github)
• Next.js + Tailwind with visual editing (Github)

Or run  npx create-tina-app@latest  then visit localhost:3000/admin

Watch the 4-min demo video

📱 React-Native

Super App Development

Callstack nous propose une resource complete sur les Super Apps, qui permettent d'assembler plusieurs minis apps sous une seule interface mobile. Ils décrivent aussi bien les intérêts business et organisationnels que les solutions techniques, et mettent en avant leur solution privilégiée: Re.Pack et Module Federation. Il y a également un repo Super App Showcase avec une Super App en exemple à étudier.

Les Super Apps sont populaires en Asie (WeChat, MoMo...) mais gagne du terrain. Mon intuition me dit que PlayStation 5 pourrait être une Super App React-Native, à confirmer!

• 👤 Mark Lawlor (NativeWind) joins Expo: bonne nouvelle pour la communauté, un dev de plus pour travailler sur le support web/cross-platform.
• 👀 Bluesky - Universal Expo app: on a donc Twitter et son concurrent Bluesky qui utilisent tous les 2 React-Native-Web.
• 💬 RFC: Support Expo Config Plugins in React Native apps: propose d'upstreamer les Config Plugins de Expo directement dans React-Native core pour diverses raisons de DX, dont faciliter les upgrades. Proposition challengée par Brent Vatne et la communauté car il n'est pas si difficile d'ajouter le support Config Plugin / Prebuild à un projet React-Native.
• 📜 Using AI to Write Tests for React Components
• 📦 React-Native 0.71.7
• 📦 SkiaAnimationShowcase
• 🎙️ Syntax FM - Supper Club × Nate Weinert and Tamagui
• 🎙️ RNR 264 - RN testing with Detox with Josh Justice and Jason Grosz
• 👥 React-Native-Connection (Paris, 1er Juin) nous offre -10% (code "REACTHEBDO").
• 👥 App.js (Cracovie, 10-12 Mai) nous offre -20% sur les workshops (code "ThisWeekinReact20").
• 👥 Chain React (Portland, 18-19 Mai) nous offre -10% sur les entrées (code "thisweekinreact").

🧑‍💻 Jobs

🧑‍💼 Shotgun - Senior Full Stack Engineer - 60-75k€ + BSPCE

Shotgun est la billetterie des évènements electro. Nous recherchons des devs expérimentés pour travailler sur une stack moderne: React, React-Native, Typescript, GraphQL, NextJS, PgSQL, Vercel...

🧑‍💼 Premier Octet - Développeurs(euses) React - Paris

Nous cherchons des développeurs(euses) JavaScript passionnés. Vous interviendrez en développement sur des projets variés et motivants, à la fois serveur et front (React, Nest, Next), et éventuellement mobile (React Native).

💡 Comment publier une offre d'emploi ?

🏢 Vous recrutez en CDI ou freelance? Contactez-moi!

🇫🇷 En français

• 🎥 React Query - Crash Course pour débutant
• 🎥 Node.js v20 et son système de permissions ! - Actus JS de la semaine

💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !

🔀 Autre

• How We Sped Up Serverless Cold Starts with Prisma by 9x
• Oracle sends legal notice for vioation of JavaScript trademark
• Partykit - Kit for building realtime collaborative applications
• What's new in ECMAScript 2023
• Rich Harris on frameworks, the web, and the edge
• Introducing npm package provenance
• The “const” Deception
• Picking the Right Tool for Maneuvering JavaScript's Event Loop
• Badging for Home Screen Web Apps
• Lightning CSS 1.20
• Rspack 0.1.9

🤭 Fun

A plus 👋