React

React combine <form action>, useActionState et useOptimistic pour gérer les retours d’attente et les mises à jour optimistes tout en conservant un envoi de formulaire avant l’exécution de JavaScript. L’article montre comment cette continuité permet d’enrichir l’interface après hydratation sans abandonner le comportement natif du navigateur.

Le point décisif est de garder l’action serveur directement dans action : une fonction cliente intermédiaire casse la soumission sans JavaScript. Pour l’optimisme, useHydrated() permet de choisir entre l’action serveur et sa version enrichie côté client.

TanStack Redact 0.2.0 remplace React et React DOM dans le navigateur sans modifier le code de l’application. Ses intégrations stables couvrent TanStack Start, Vite, Vinext et Next.js ; dans ces deux derniers frameworks, React reste chargé du rendu serveur tandis que Redact gère l’hydratation et le rendu client.

Les mesures fournies par TanStack montrent des réductions de bundle allant de 20,4 % à 70,5 % sur leurs applications de référence, mais ces gains varient selon le projet. Le compromis est concret : Redact rend de façon synchrone, sans time slicing ni rendu interruptible de React. Un rendu lourd peut donc retarder les interactions ; la compatibilité et les écrans les plus chargés méritent d’être vérifiés dans chaque application.

L’expérience de projection React pilotée par l’IA de Tanner Linsley est devenue un projet TanStack utilisé en production. Redact propose un runtime plus léger, compatible avec React et déjà fonctionnel avec Start, Next.js, Vinext et Vite. Côté serveur, React continue de gérer le SSR et les Server Components.

Le compromis se situe dans le rendu : Redact travaille de façon synchrone, sans le time slicing de React. Comme le reconnaît le billet, un rendu lourd peut encore retarder les interactions. Le gain de légèreté s’accompagne donc d’une limite à prendre en compte pour les interfaces exigeantes en réactivité.

MicroKit rassemble des interactions prêtes à copier — boutons animés, onglets, champs et effets au survol — avec des versions React ou CSS et Tailwind. Chaque composant se récupère séparément en JavaScript ou TypeScript, sans installer de package ; 26 des 54 n’ont aucune dépendance, tandis que 28 utilisent lucide-react.

Le code est sous licence MIT et les variantes Tailwind sont prévues pour les versions 3 et 4. Côté Next.js App Router, la plupart des composants restent compatibles avec les server components ; ceux qui utilisent état, ref ou gestionnaire d’événement nécessitent « use client ».

next-themes applique le thème dès le chargement, prend en compte la préférence système et synchronise le choix entre les onglets. Son ThemeProvider fonctionne avec l’App Router comme avec pages/, et expose un hook pour changer de thème ou gérer plusieurs variantes.

Le point à intégrer dans l’architecture : le thème stocké dans le navigateur est inconnu au rendu serveur. L’interface qui dépend de useTheme doit donc attendre le montage côté client pour éviter les erreurs d’hydratation. La bibliothèque met aussi à jour l’attribut de <html> — avec suppressHydrationWarning recommandé — et reste indépendante de la solution CSS utilisée.

Quand un agent modifie une interface, vérifier un seul compte ne suffit pas à couvrir les rôles, les offres ou les options activées. Matt Rothenberg montre comment les valeurs dispersées dans les hooks, providers et layouts peuvent masquer des états oubliés — comme un bouton Delete visible pour un utilisateur en lecture seule.

En faisant de l’état d’affichage une entrée explicite des composants, les équipes peuvent rendre directement les combinaisons pertinentes, les tester ou les comparer dans une grille. Storybook et Playwright complètent cette démarche, mais ne choisissent pas les scénarios à couvrir : cette décision reste essentielle.

React Bits 2.0 annonce 216 composants animés : 104 ont été reconstruits ou repensés, et plus de 20 ont supprimé des dépendances supplémentaires. Les démos ajoutent presets et interactions au clic, tandis que Background Studio, Shape Magic et Texture Lab ont été reconstruits pour ajuster des effets en direct et exporter leurs résultats.

La mise à jour refond aussi la documentation et la page d’accueil, qui utiliserait environ cinq fois moins de JavaScript. Le catalogue facilite le prototypage d’interfaces expressives ; la variété des animations invite toutefois à évaluer leur coût et leurs dépendances avant de les intégrer à un produit.

Une faille critique permet l’exécution de code à distance sans authentification dans certaines applications utilisant React Server Components. Elle concerne react-server-dom-webpack, react-server-dom-parcel et react-server-dom-turbopack dans les versions indiquées par l’avis, avec un score CVSS de 9,5.

Le scénario décrit reste rare : il nécessite des réponses transportant plusieurs tableaux typés et une valeur contrôlée par l’attaquant. Les applications React sans serveur ne sont pas concernées, pas plus que celles qui n’utilisent pas de framework, bundler ou plugin prenant en charge les Server Components. Les correctifs sont disponibles en 19.0.9, 19.1.10, 19.2.9 et 19.3.1 ; les déploiements concernés doivent être mis à jour immédiatement.

Ce panorama détaille les étapes d’organisation d’un projet React, du simple fichier à la structure modulaire d’un monorepo. L’auteur expose les choix de découpage (fichiers, dossiers techniques, dossiers de fonctionnalités, domaines, packages) et leurs impacts sur la maintenabilité, l’isolation des dépendances et la scalabilité. Les exemples concrets montrent comment faire évoluer l’architecture selon la taille du projet, en soulignant les règles pour éviter les dépendances croisées et favoriser la réutilisation.

La version 1.22.0 de React Aria introduit le composant Sheet, une surcouche glissable qui s’appuie sur les gestes natifs de scroll pour offrir des transitions fluides et tactiles, idéales pour les panneaux mobiles ou les notifications. Cette release apporte aussi la prise en charge de Turbopack pour l’optimisation des locales, une meilleure gestion des widgets interactifs comme le clavier virtuel, et plusieurs correctifs sur les collections, ComboBox et formulaires.

TanStack Start 1.0 officialise un framework full-stack stable, déjà éprouvé en production, qui combine le routage SPA, le rendu serveur, le streaming et des fonctions serveur typées pour React et Solid. L’accent est mis sur la sécurité de typage de bout en bout : les paramètres de routes, les loaders et les fonctions serveur sont tous typés, ce qui facilite la maintenance et l’évolution, même pour les agents IA. Le support de React Server Components est optionnel, et le déploiement s’appuie sur Vite, Nitro ou Rsbuild, sans imposer une architecture unique.

TanStack Charts 1.0 propose une approche composable des graphiques, inspirée de la Grammar of Graphics, avec un cœur agnostique et un adaptateur React. L’article détaille comment chaque élément du graphique (ligne, point, barre) devient un composant réutilisable, permettant d’étendre ou de personnaliser facilement les visualisations au fil des besoins. La stabilité de l’API et la granularité des imports facilitent l’intégration dans des applications évolutives sans sacrifier la taille du bundle ni la sécurité de typage.

React Canary introduit l’API browser() pour rendre un composant exclusivement dans le navigateur, sans risque de mismatch à l’hydratation ni effet de montage supplémentaire. L’article montre comment placer use(browser()) dans un composant client, entouré d’une Suspense, pour différer son rendu jusqu’à ce que les APIs du navigateur soient disponibles. Plusieurs exemples concrets illustrent l’intérêt de cette approche pour accéder à localStorage, au DOM ou à des données spécifiques à l’utilisateur, tout en évitant les contournements habituels avec useEffect ou des vérifications de l’environnement.

Sh​​adcn Admin Kit fournit des blocs open source pour créer des outils internes, tableaux de bord et applications B2B en React. Il préconfigure notamment tables de données, formulaires, authentification, recherche et internationalisation, avec des capacités avancées comme le CRUD généré, les permissions, les actions groupées et l’annulation.

Ce guide explique comment étendre Markuplint au-delà du HTML grâce à des plugins de parseur et de spécification. Il donne des exemples d’installation pour JSX, Vue, Svelte et Pug, une approche utile pour appliquer des règles de qualité à des templates et composants écrits dans plusieurs syntaxes.

Transitions Pro réunit plus de 43 transitions prêtes pour des applications web en React, TypeScript et Next.js. Les extraits copiables s’accompagnent de skills pour les agents et d’outils de création ou d’audit du mouvement, ce qui aide à passer d’une animation isolée à un système d’interactions cohérent.