📨 #156: Server Actions, Stale Closures, React Falls Behind, Expo Builds, Suspense Throttling, React-Aria, Natuerlich, Obsidiosaurus, Expo-SQLite, Expo DevTools...

Salut à tous !

Cette semaine, nous avons pas mal d'articles de la communauté React et React-Native, et les dernières annonces Expo Launch Party. Certains articles sont très longs, je n'ai pas eu le temps de tout lire.

📷 J'étais trop occupé à créer le compte Instagram de la newsletter! Je compte y poster les news et tips React visuels, y compris les meilleurs memes que je n'ai pas pu inclure ici 🤭.

🧑 J'ai aussi retiré la section Jobs qui n'apportait pas grand-chose: je vais voir plus tard comment la réintégrer.

👥 Pour les développeurs React-Native: la conférence React Native EU (Wrocław/Pologne, 7–8 September 2023) nous propose une réduction de -15% sur les entrées.

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

One of the few things I regularly read to keep up with the React world.

Theo BrowneFounder of ping.gg - Youtuber

💸 Sponsor

Enterprise Grade APIs for Feeds, Chat, & Video!

Stream is the maker of enterprise-grade APIs and SDKs that help product and engineering teams solve two common problems at scale: in-app chat and social activity feeds.

With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch. Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.

Stream provides robust client-side SDKs for popular frameworks such as React, React-Native, Expo, Flutter, Android, Angular, Compose, Unreal, and iOS. Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.

Try the new React Video tutorial!

⚛️ React

Can React Server Actions finally fix forms?

Une bonne introduction aux Server Actions, feature React à venir, mais déjà intégrée en expérimental dans Next.js 13.4. Propose un petit tutoriel pour uploader une vidéo avec un titre. Les Server Actions peuvent retourner une réponse pour donner du feedback à l'utilisateur, mais on voit bien que ça n'est pas une DX idéale.

Pour moi, il faudrait que les Server Actions supportent à 100% le progressive enhancement. Il faudrait sans doute introduire une API "flash" pour gérer un feedback sans JavaScript coté client, et qui existe sur de nombreux frameworks backend. Remix propose d'ailleurs (session.flash()). Info liée qui pourrait vous intéresser: avec action.$$FORM_ACTION il est possible d'étendre le progressive enhancement de React.

• 💸 Zero To Shipped - Master Fast-Paced Fullstack Development and Finally ship that product
• 🧑‍🎓 React.dev - Using TypeScript: nouvelle page officielle de documentation.
• 💬 Next.js RFC - Google Tag Manager and gtag in next/third-parties: propose d'intégrer les analytics Google via un hook plutôt qu'un composant, avec support Web Worker.
• 🐦 Million.js Automatic Mode - Video trailer
• 📜 Things you forgot (or never knew) because of React: une très longue critique de React, qui selon l'auteur est un framework dépassé. Ça reste intéressant à lire même si je ne suis pas d'accord 😄.
• 📜 Fantastic closures and how to find them in React: explique ce qu'est une stale closure en React et présente différents cas qui peuvent introduire ce problème, puis propose une solution basée sur useRef().
• 📜 The simplest example to understand Server Actions in Next.js: exemple de Server Actions très simple à comprendre, qui offre un moyen pratique de faire des appels RPC à votre API.
• 📜 On React Suspense’s throttling: met en avant un comportement surprenant de React lorsque vous imbriquez les <Suspense>.
• 📜 Quit Your YAP-ing: encourage à abandonner le syndrome "Yet-Another-Prop" et utiliser la composition.
• 📜 Node.js's Config Hell Problem: Deno pointe du doigt les projets comme Next.js qui ont souvent des dizaines de fichiers de configuration.
• 📜 Supabase - Vercel Integration and Next.js App Router Support: intégration qui peut être intéressante à étudier. Des APIs aux noms intéressants comme createClientComponentClient 😅.
• 📜 Lifting Off with Astro
• 📜 Form Validation with React Hook Form
• 📜 Introducing a new lint rule for React Testing Library
• 📜 How to Use Jotai and useTransition for Mutation
• 📜 Coding the stars - An interactive constellation with Three.js and React Three Fiber
• 📦 React Aria - August 9 Releases - HTML form submit/reset, DropZone, FileTrigger...
• 📦 Natuerlich - Composable interactions for WebXR experiences - With React-Three-Fiber support
• 📦 Reakit - August 2023 update
• 📦 Obsidiosaurus - Obsidian -> Docusaurus Converter
• 📦 tw2panda - Easily migrate code from Tailwind to Panda CSS
• 🎥 Why I Stopped Using Next.js And Chose Astro Instead
• 🎥 Responsive Framer Motion with Tailwind CSS
• 🎥 Dominik Dorfmeister: React Query With The App Router

Ne manque pas le prochain email !

People always ask how I keep up to date, it's This Week In React.

Jack HerringtonPrincipal Engineer - Youtuber

💸 Sponsor

CoderPad: Code together before you work together

Hiring front-end developers is hard. 😩 But 4,000+ engineering teams — including at Netflix, Spotify and LinkedIn — have found a better way! 🤠 Skip the algorithm interviews and run front-end interviews in a fully customizable and collaborative IDE - where you can:

• drag and drop a React (and Angular or Vue) repo
• add packages with npm install
• let candidates use ChatGPT live in the interview
• watch & share code playback after the interview

Use CoderPad to run fast, fair and real coding interviews that candidates and interviewers trust. Sign up for free today & hire with confidence.

📱 React-Native

Expo Preview - Fully customizable builds on EAS Build.

Expo nous propose un nouveau système qui permet de customiser le build EAS avec un fichier Yaml, ce qui devrait donner beaucoup de flexibilité pour utiliser les outils monorepo de votre choix (Nx, Turbo, Rush...) ou encore rajouter vos propres étapes CI. Cela fait beaucoup penser à GitHub Actions. Marrant: on dirait que EAS utilise Fastlane sur le build iOS.

• 👀 Expo Proof of concept - expo-sqlite integration with CR-SQLite: intégration SQLite et CRDT qui facilite la création d'apps mobiles local-first.
• 👀 Expo Proof of concept - Expo CLI Dev Tools Plugins: Expo souhaite proposer un système de plugin pour créer des DevTools, et propose une demo avec les Apollo DevTools. Cela devrait à terme permettre de remplacer Flipper.
• 🐦 Reanimated on react-native-windows demo
• 🐦 Async Components + use() hook demo
• 🐦 Half of the Top 20 iOS Sports apps are powered by React Native
• 📜 Tale of a Web Developer Improving Startup Performance for a large React Native App
• 📜 Adding React-Native to a complex app - 4-part series
• 📜 Getting started with react native storybook
• 📜 Exploring React Native's New Architecture: A Peek into the New Architecture
• 🎙️ The React Native Show Podcast #25 - Databases for mobile apps React Native & Realm
• 👥 React Native EU 2023 (Wrocław, 7–8 September 2023) nous offre -15% sur la conférence avec le code "thisweekinreact15".

🇫🇷 En français

• 📜 Les modes d’authentification innovants
• 🧵 La meilleure lib CSS-in-JS?

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

💸 Pylote - L'extension 100% gratuite pour être sur toutes les plateformes de freelance.

• Importe ton profil Comet ou LinkedIn en 5 secondes.
• Synchronise ta dispo et** diffuse** ton profil auprès de 17 cabinets de recrutement : Comet, Crème, Cherry-Pick...
• Accède à un jobboard centralisé regroupant un ensemble de missions.

🔀 Autre

• 📣 Gecko (Firefox) - Intent to Prototype: :has selector
• 📜 What Does It Mean for Web Browsers to Have a Baseline
• 📜 Deprecating the unload event
• 📜 A Blog Post With Every HTML Element
• 📜 How layout position impacts three big web performance levers
• 📦 Announcing TypeScript 5.2 RC
• 📦 Zod 3.22 - readonly()
• 👥 ViteConf 2023 - October 5th

🤭 Fun

A plus 👋