# React · Veille technologique [Source canonique]() Construction d’interfaces avec des composants React, leur état et leurs cycles de rendu. ## [react-resizable-panels : trois modèles de layouts redimensionnables]() La documentation de react-resizable-panels présente des composants React pour construire des interfaces redimensionnables : panneaux en ligne ou en colonne, grilles ajustables en deux dimensions et workspaces à onglets réorganisables par glisser-déposer. L’exemple de workspace montre comment fournir un modèle initial avec `defaultModel` et choisir le contenu d’un onglet via `renderTabContent`. Le package inclut ses définitions TypeScript. 2026-11-07 · [Markdown]() · [Ressource originale]() ## [Hydratation React et SSR : éviter les écarts sans masquer le contenu]() Dans Next.js, une valeur de `localStorage` peut faire diverger le HTML rendu côté serveur du premier rendu client. L’article compare les compromis : attendre le montage évite l’erreur, mais retire le contenu réel du HTML SSR ; initialiser les deux rendus avec la même valeur préserve ce contenu, au prix d’une mise à jour ultérieure pouvant provoquer un flicker. Pour synchroniser une sidebar sans ce clignotement, un script inline applique son état au DOM avant l’hydratation et le transmet à React, qui reprend les mêmes classes. L’article distingue aussi le cas d’un contrôle de thème isolé et celui d’un backdrop mobile géré par CSS. 2026-11-07 · [Markdown]() · [Ressource originale]() ## [emoji-picker-react : personnaliser un sélecteur d’émojis React]() emoji-picker-react fournit un sélecteur d’émojis pour React, utilisable avec ses styles intégrés ou adapté à l’identité visuelle du produit. Le playground interactif permet de tester les propriétés, les thèmes CSS et des exemples de personnalisation. Le composant couvre notamment la recherche, les tons de peau, les émojis personnalisés et plusieurs langues. Son mode « réactions » affiche d’abord une sélection compacte de réactions populaires, puis donne accès à la bibliothèque complète. 2026-11-01 · [Markdown]() · [Ressource originale]() ## [Puck, éditeur visuel pour React : champs et canvas dans la version 0.24]() Puck, l’éditeur visuel de pages pour React, ajoute dans sa version 0.24 des groupes et des onglets pour organiser les champs, ainsi qu’un champ `checkbox` pour sélectionner plusieurs options. Des poignées de déplacement facilitent aussi le réagencement de composants dans des mises en page imbriquées. L’API `renderFields` permet de composer ces présentations. Côté canvas, `InlineTextField` rend possible l’édition directe du texte, tandis que `fieldTransforms` transforme les valeurs au rendu sans modifier les données sous-jacentes. 2026-11-01 · [Markdown]() · [Ressource originale]() ## [React : préserver le progressive enhancement des Server Actions]() React combine `
`, `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. 2026-11-01 · [Markdown]() · [Ressource originale]() ## [TanStack Redact réduit le runtime client de React]() 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. 2026-10-29 · [Markdown]() · [Ressource originale]() ## [Redact : un runtime React allégé, avec un rendu synchrone]() 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é. 2026-10-29 · [Markdown]() · [Ressource originale]() ## [MicroKit : 54 micro-interactions React, CSS et Tailwind à copier]() 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 ». 2026-10-29 · [Markdown]() · [Ressource originale]() ## [next-themes : gérer les thèmes sans flash ni piège d’hydratation]() 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 `` — avec `suppressHydrationWarning` recommandé — et reste indépendante de la solution CSS utilisée. 2026-10-29 · [Markdown]() · [Ressource originale]() ## [React : rendre les états d’interface explicites à l’ère des agents]() 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. 2026-10-27 · [Markdown]() · [Ressource originale]() ## [React Bits 2.0 : composants animés et outils de création repensés]() 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. 2026-10-23 · [Markdown]() · [Ressource originale]() ## [React Server Components : une exécution de code à distance critique]() 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. 2026-10-23 · [Markdown]() · [Ressource originale]() ## [Structurer un projet React : du fichier unique au monorepo modulaire]() 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. 2026-10-19 · [Markdown]() · [Ressource originale]() ## [React Aria : un composant Sheet animé et optimisé pour le mobile]() 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. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [TanStack Start 1.0 : framework full-stack stable et typé pour React et Solid]() 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. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [TanStack Charts 1.0 : une bibliothèque de graphiques modulaire et évolutive]() 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. 2026-10-15 · [Markdown]() · [Ressource originale]() ## [React : l’API browser() pour rendre un composant uniquement côté navigateur]() 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. 2026-10-15 · [Markdown]() · [Ressource originale]() ## [shadcn-admin-kit : blocs React open source pour back-offices]() 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. 2026-10-06 · [Markdown]() · [Ressource originale]() ## [Étendre Markuplint aux syntaxes JSX, Vue, Svelte et Pug]() 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. 2026-09-29 · [Markdown]() · [Ressource originale]() ## [Des transitions prêtes à intégrer dans une application web]() 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. 2026-09-13 · [Markdown]() · [Ressource originale]() Page 1 / 4 [Suivant]()