📨 #183: Vercel Edge, React Native 0.74 + IDE, refs, patching fetch(), Remix Single Fetch, RSCs, Signals, Redwood, Zustand Slices, XState, VisionCamera 4, NewArch, VisionOS...

24 avril 2024 · 10 minutes de lecture

Editeur - Mainteneur de Docusaurus

Indie Hacker

Salut à tous !

Cette semaine, React Native est à l'honneur ! Mais il y a aussi des nouvelles intéressantes de Vercel et des PR à regarder de la part de l'équipe principale de React.

En début de semaine, j'étais à la conférence React/RN Connection à Paris. J'ai été ravi de rencontrer certains d'entre vous !

La fête parisienne n'est pas terminée. Après de nombreuses années, la grande dotJS conference est de retour à Paris le 27 juin. Ils ont déjà annoncé d'excellents intervenants, dont Mark Dalgleish, Malte Ubl, Charlie Gerard, James Q Quick, Ben Lesh... Dernières places disponibles, obtenez une réduction de 10% avec mon code « TWIR ».

En raison de la conf, je n'ai eu qu'aujourd'hui pour travailler sur la newsletter. Heureusement, mon co-auteur Benedikt a pris le relais et a fait le plus gros du travail cette semaine ! 🙏

La semaine prochaine, la newsletter fera une pause bien méritée. Nous serons de retour le 8 mai.

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

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

Jack HerringtonPrincipal Engineer - Youtuber

💸 Sponsor

A newsletter helping build your product skills

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

🐦 Vercel reverted all edge rendering back to Node.js

Le vice-président des produits de Vercel, Lee Rob, a expliqué sur X que Vercel « réinstaure tous les rendus du edge sur Node.js ». Si vous utilisez Vercel (et probablement même si vous ne l'utilisez pas), vous savez que Vercel a mis en avant le concept de « edge » depuis longtemps. D'une part, cela signifie que le calcul est effectué à proximité de l'endroit où se trouve l'utilisateur qui accède à un site hébergé sur Vercel. D'autre part, cela signifie également que ce calcul est exécuté sur un « runtime edge », qui est construit sur V8 et non sur Node.js. Si l'idée d'exécuter des calculs à proximité des utilisateurs finaux semble séduisante, les avantages disparaissent rapidement si les données doivent être chargées à partir d'un emplacement central (ce qui est très souvent le cas). Dans le même temps, les équipes de développement ont souvent du mal à adapter la charge de travail au sous-ensemble limité des API disponibles sur le runtime edge. Il semble que Vercel soit arrivé à la conclusion que, globalement, les obstacles rencontrés par les développeurs l'emportent sur les avantages limités, raison pour laquelle ils préfèrent revenir à des runtimes Node.js centralisés. J'apprécie leur transparence à ce sujet ! Si vous voulez plus de détails, Theo a fait une vidéo à ce sujet.

💸 Clerk's prebuilt UI components give you a beautiful, fully-functional user management experience in minutes. Start for free!
👀 React Core PR - React 19 will not patch fetch() anymore! : le patch controversé fetch() pour dédupliquer les requêtes dans les RSC est maintenant retiré du noyau de React. Vous pouvez y voir une bonne chose, mais gardez à l'esprit que vous devrez maintenant dédupliquer les requêtes vous-même manuellement avec React.cache.
👀 React Core PR - Don't minify symbols in production builds : Les versions de production de React 19 préserveront les noms de variables/fonctions et devraient être plus faciles à lire/déboguer. Vous pouvez toujours les minifier vous-même si vous le souhaitez, mais l'utilisation de la compression HTTP gzip devrait suffire à compenser la taille supplémentaire.
👀 React Docs PR - Add documentation for ref cleanup function : Les fonctions ref de React 19 peuvent désormais renvoyer une fonction de nettoyage (🐦 aperçu). Cela devrait également aider les utilisateurs qui emploient des refs string (supprimés en v19) et des classes à migrer grâce à des codemods automatisés.
👀 Remix POC - Remix + Hono + Vite
🗓 React Summit - 🇳🇱 Amsterdam - 14-18 juin - 10% de réduction avec le code « TWIR ». Un programme impressionnant comprenant Evan Bacon, Kent C. Dodds, Theo, Tim Neutkens, Mark Erikson, Fred Schott et bien d'autres !
📜 HTML attributes vs DOM properties : Une excellente plongée dans les comportements subtils du DOM et les décisions de conception, y compris la façon dont les frameworks comme React ou Vue gèrent la différence. Explique également comment React 19 améliorera la prise en charge des Web Components.
📜 Redwood - Building a new docs site with RSC : Redwood montre comment construire un site de documentation avec Redwood, basé sur MDX et RSC.
📜 Deploy a new Remix app to Cloudflare Pages: Beaucoup de choses ont récemment changé (et se sont améliorées !) sur la façon dont Remix peut être déployé sur les pages CF. Voici un bon guide sur l'état de l'art.
📜 Improving INP in React and Next.js : Interaction to Next Paint a récemment remplacé First Input Delay (FID) en tant qu'élément vital du web, cet article explique comment l'optimiser.
📜 Did Signals Just Land in React? : Spoiler Alert : Non, ils ne l'ont pas fait. Mais il y a toujours un moyen d'essayer les signaux dans React.
📜 Vercel - Building an interactive 3D event badge with React Three Fiber
📜 Getting the Current URL in Next.js Server Components
📜 How to manifest streamlined authentication: AWS Cognito in a React app
📜 Localized link tags for SEO in Remix
📜 How Solid Made Me A Better React Developer
📜 Boosting Performance with Next.js and React Server Components - A GeekyAnts Case Study
📜 How to Simplify Global State Management in React Using Jotai
📦 Remix 2.9 - Single Fetch (unstable)
📦 StyleX - 0.6.1 - Typed variables, fallback values, ESLint plugin
📦 Hydrogen April 2024 release - Analytics preview, stable Vite support, SEO updates, full-page caching
📦 Zustand-Slices - Assemble slices into a single store
📦 Spoiled - Realistic Spoiler component for React.js
🎙️ Off The Main Thread Podcast: Putting React In The Browser
🎥 Jack Herrington - JS Built-in Signals In React and Svelte today!
🎥 Ben Holmes - Vercel got it wrong : Ben Holmes présente un point de vue intéressant sur le thème du « edge », en détaillant l'approche de Cloudflare.

Ne manque pas le prochain email !

My favorite resource for keeping up with the React community!

Evan BaconEngineering Manager - Expo

💸 Sponsor

NLUX ― New React Library To Simplify Adding AI Features

NLUX is an open-source React library that makes it super simple to integrate powerful large language models (LLMs) like ChatGPT into your web app or website. With just a few lines of code, you can add conversational AI capabilities.

Key features 🌟 include:

Build AI Chat Interfaces In Minutes - High quality conversational AI interfaces with a few lines of code.
React Components & Hooks - <AiChat /> for UI and useChatAdapter hook for easy integration.
Flexible Adapters - For ChatGPT, LangChain and HuggingFace, and an API to Create Your Own Adapter for any backend.
Synchronise UI state with AI backends in an optimal way.
Markdown Streaming - Render LLM markdown as it's being generated.
Zero Dependencies - Lightweight codebase.

More info, examples and documentation on nlux.dev

📱 React-Native

📦 React Native 0.74 released

Cette semaine a vu la sortie de React Native 0.74, un jalon important pour la communauté ! La dernière version fait du "bridgeless mode" le mode par défaut pour les nouveaux projets utilisant la Nouvelle Architecture (avec la prochaine version, 0.75, la New Arch deviendra également le mode par défaut). Les deux peuvent toujours être désactivés si nécessaire, mais ils représentent clairement l'avenir de React Native, et au cours des derniers mois en particulier, BEAUCOUP de bibliothèques ont ajouté la prise en charge des deux. Mais ce n'est pas tout : RN 0.74 inclut Yoga 3.0. Il y a très peu de changements et de dépréciations, mais cela vaut la peine de les vérifier dans les notes de version.

📦 React Native IDE is now in beta

Une autre nouvelle passionnante cette semaine est la bêta fermée de React Native IDE, développée par l'équipe de Software Mansion. Vous pouvez maintenant vous inscrire pour obtenir un accès anticipé à l'IDE. Ils ont également une page d'accueil, et les docs sont publiquement disponibles pour tous les curieux.