📨 #193: State of React, Server Functions, next/form, useId, Astro, Meteor, Gluestack, React-Aria, Turbopack, Airbnb, Apollo, DRY, IDX, Bootsplash, Flash Calendar, CSS, ES, Poku...

24 juillet 2024 · 10 minutes de lecture

Editeur - Mainteneur de Docusaurus

Indie Hacker

Salut à tous !

Cette semaine, les résultats de l'enquête State of React sont enfin publiés, et ils sont riches de renseignements utiles.

J'y ai trouvé d'excellents articles sur les abstractions en React, ainsi que des retours d'expérience et des études de cas de diverses entreprises React et React Native.

Astro a sorti Server Islands, et cela semble être une solution assez simple mais convaincante pour rivaliser avec Next.js Partial Prerendering, sur lequel Vercel a également publié un excellent article. Il y a aussi la Renaissance de Meteor à regarder, les sorties de React Aria, et une v2 de Gluestack-UI pour les devs Universal React Native.

Vous aimez TypeScript et les outils de développement web en général ? Rendez-vous à la Squiggle Conf (🇺🇸 Boston - 03 & 04 octobre), qui nous offre une réduction de 10% avec le code « TWIR ». D'excellents orateurs ont déjà été annoncés !

💡 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

The Category-Defining React Grid for Your Enterprise

Data grids are complex components of web applications, but current solutions are inefficient, require a lot of maintenance, and perform poorly. Graphite Grid transforms the landscape with two key features: retargetable rendering and reactive signal state.

Graphite Grid separates grid state from view logic, allowing a single unified state model to support a variety of render targets, declaratively or imperatively. It includes a DOM and Canvas renderer, giving developers flexible, high-performance options 🚀.

Graphite Grid is declarative and consistent, leveraging state signals to ensure seamless integration with your application. Designed with React in mind, it is the only JavaScript data grid built with React's state management primitives. Try it now!

⚛️ React

State of React 2023 - Survey Results

Les résultats de la toute première enquête State of React sont enfin en ligne. Les données ont été collectées en novembre 2023, et il a fallu un certain temps pour que les résultats soient publiés. C'est un excellent outil pour analyser les tendances de notre cher écosystème de frameworks. Et il sera encore meilleur l'année prochaine pour voir comment ces tendances évoluent. Sans plus attendre, voici mes sélections :

L'adoption des hooks a été largement couronnée de succès
Signaux très positifs pour React Query, Zustand, Radix UI, React Aria, shadcn/ui, tRPC, Zod
Il n'y a pas de gagnant clair pour le framework React. Next.js est le plus populaire mais son taux de rétention est légèrement inférieur à celui d'Astro et de Remix.
L'utilisation du moteur de rendu React montre que React n'est pas seulement React-DOM. Plus de 30 % utilisent React Native et 9 % React-Three-Fiber.
Seulement 7% ont déjà utilisé mon hook préféré et sous-estimé useSyncExternalStore
This Week In React est la 5ème ressource la plus populaire dans la catégorie "Blogs & Magazines" (❤️️ merci !)

La prochaine enquête State of React 2024 est prévue pour septembre 2024 et c'est le moment de participer à la conception de l'enquête.

💸 Reactile – a new approach to React-based web apps. Create your own views. Let it handle your windows and widgets in a single browser tab
👀 Next.js PR - next/form
🗓️ React-Brussels - 🇧🇪 Bruxelles - 18 octobre - Certains orateurs ont déjà été révélés ! Réservez dès maintenant et bénéficiez d'une réduction de 10% avec le code « TWIR ».
📜 Data Fetching with Server Actions in Next.js : Vous pouvez utiliser les Server Actions pour récupérer les données du client à l'aide de React-Query. Il y a cependant des limitations à prendre en compte : elles utilisent des requêtes POST et s'exécutent de manière séquentielle. Pour information, une fonction « use server » appelée en dehors d'une transition n'est pas une Server Action, mais une Server Function.
📜 Use useId() Instead Of Hand-Making IDs : Les ID sont utiles pour l'accessibilité, mais vous préféreriez éviter de les créer manuellement si vous voulez monter un composant deux fois, ou si vous voulez avoir un bon support pour l'hydratation de React. Pour accéder aux éléments du DOM, useRef est suffisant.
📜 Do not pass DTOs to UI components : Pourquoi est-il préférable de concevoir des structures de props de composants de manière indépendante, plutôt que d'utiliser aveuglément les données utiles de votre backend en tant que props ?
📜 DRY – the common source of bad abstractions : Cela illustre parfaitement comment les développeurs React peuvent finir par créer les mauvaises abstractions. Les bibliothèques React UI ont appris au fil des ans à ne pas trop abstraire et à vous donner une grande flexibilité grâce à la composition.
📜 Turbopack updates: Moving homes : Le bundler Turbopack est déplacé vers le dépôt Next.js. La co-localisation aidera l'équipe à itérer plus rapidement sur les builds de production (actuellement prêts à 92% !). Turbopack restera un bundler autonome agnostique au framework : une fois prêt, il sera replacé dans un dépôt séparé.
📜 Vercel - How to choose the best rendering strategy for your app : Excellente vue d'ensemble de toutes les stratégies de rendu (SSG, SSR, ISR, CSR), de leurs avantages et des meilleures pratiques. L'utilisation du pré-rendu partiel s'appuie sur les stratégies ci-dessus. L'utilisation de Next.js avec les Server Components et les Suspense boundaries permet à votre application d'être à l'épreuve du temps en sélectionnant la meilleure stratégie de rendu pour chaque composant.
📜 How Airbnb Smoothly Upgrades React : Airbnb a récemment mis à jour ses frontends de React 16 à React 18. En utilisant un « système de mise à niveau React », s'appuyant sur un code d'infrastructure partagé et une stratégie de migration et de déploiement incrémentale.
📜 Fine-grained Markdown : Article interactif du créateur de Code Hike (basé sur MDX) montrant comment nous pouvons décorer Markdown et l'étendre de manière sûre pour en faire un média plus riche.
📜 Data fetching in useEffect vs Remix loader
📜 Integrating Next.js with New Relic
📜 Clean(er) React Architecture (Part 8) - How Does React-Query Fit Into The Picture?
📜 Zoom - Why we chose T3 stack to build our reference apps on Web
📦 Astro 4.12 - Server Islands : Astro a sorti une nouvelle fonctionnalité Server Islands qui rend un placeholder sur le serveur, et le remplace indépendamment avec du contenu dynamique par la suite, vous permettant de rendre le reste de votre site de manière statique. Il s'agit d'une approche alternative au modèle Next.js, qui prévoit de résoudre ce problème avec React Server Components + Suspense + Partial Pre-Rendering. Leur démo est un fork rebaptisé de celle de Next.js PPR et la surpasse !
📦 Meteor.js 3.0 : Meteor vient de sortir une nouvelle version majeure qui abandonne les anciennes coroutines Fibers au profit d'async/await, passe à Node 20 et intègre Express. Cette nouvelle version prétend être la Renaissance de Meteor.js, avec des événements de lancement à partir du 29 juillet. Je n'ai jamais utilisé Meteor, et je suis curieux de savoir quelle place il prendra aux côtés des frameworks React modernes que nous avons aujourd'hui.
📦 React Aria July 22 release - React 19 ready, virtualization improvements, toast focus management improvements, Color Picker RC
📦 Apollo Client 3.11 - Subscription improvements, React 19 + compiler support, new testing library, new Devtools options
📦 eslint-plugin-use-server - Disallows top level "use server"
🧩️ Design GUI - Browser Extension for managing colors in CSS Variables - Support for shadcn/ui
🎥 React Summit 2024 - All the talks are online
🎥 dotJS 2024 - YouTube playlist with talks from Malte Ubl, Mark Dalgleish and more
🎥 Sam Selikoff - How to build a Recursive React Component
🎥 Web Dev Simplified - How To Debug React Apps Like A Senior Developer
🎙️ Why you should use Redux in 2024 with Mark Erikson

Ne manque pas le prochain email !

My favorite resource for keeping up with the React community!

Evan BaconEngineering Manager - Expo

💸 Sponsor

Use AuthKit with any framework, not just Next.js

Not everyone uses Next.js — but it sure feels like it’s the only JavaScript framework that gets first-class integrations. AuthKit, powered by WorkOS, is an open source authentication UI built with Radix components.

Here's a tutorial that shows you how to set up AuthKit with any JS framework in 30 minutes.

🏗️ AuthKit is flexible — offering both high-level integrations and low-level SDKs.
🔐 It can be used with WorkOS User Management, which is free up to 1 million MAUs.
✨ Your users, your data. The only requirement for a valid user object is an email address.
☄️ Features like roles and permissions, MFA, user impersonation, and bot protection come standard. Don't pay a cent until you hit 1 million MAUs.

📱 React-Native

Cette section est rédigée par Benedikt.

Gluestack-UI v2 - Universal copy/paste components for Expo/Next

Gluestack-UI offre des composants et des patterns universels pour React, Next.js & React Native à copier et coller. La v2 récemment publiée est une mise à jour majeure qui se concentre sur l'optimisation des performances, la réduction des dépendances et la compatibilité avec RSC. Elle est basée sur Tailwind CSS (pour le web) et NativeWind (pour le natif). En raison de son approche copier-coller, la mise à jour n'est pas aussi simple que de changer une dépendance, mais il y a un tutoriel simple et un code mod pour aider à la mise à jour. Pour vous donner un aperçu de la v2, ils ont même publié une petite 🐦 bande-annonce sur X.