React Hebdo #78: useState, useRef, Next.js, TypeScript, Fabric, Hermes, Harmony, Parcel, CORS, Volt...

Vladimir explique les différences entre utiliser plein de useState("value") avec des valeurs primitives, ou un gros useState({...}). Une bonne analyse qui évoque des implications sur la minification, le batching des updates, la possibilité d'updates atomiques, la performance…

Vladimir mentionne les problèmes liés à un usage excessif du state React, comme le “render trashing”. Il explique dans quels cas on peut se passer du state, et propose de replacer useState par useRef sur des use-cases comme les gesture animations (swipe, move…).

Vladimir explique que pour certains use-cases, les hooks avec une API impérative gardent du sens. Vouloir tout coder en déclaratif peut avoir des impacts, comme des re-renders inutiles. Il prend en exemple des intéractions UI hover à base de setTimeout et de debounce. Les auteurs de librairies de hooks devraient exposer une API impérative pour les cas avancés, et faire une surcouche déclarative pour les cas communs.

Evan Bacon explique que le bundling des apps React-Native via Metro est assez lent. Metro a fait le choix de transpiler automatiquement les librairies dans node_modules. L'écosystème React-Native s'est développé autour de cet anti-pattern en publiant majoritairement des librairies non transformées sur npm (avec des imports/exports ES modules). Et on transpile tout le projet avec Babel, qui présente une bonne flexibilité via ses nombreux plugins, mais n'est pas la solution la plus rapide.

Evan présente Metro Exotic Transformer: une solution originale qui améliore significativement les performances de build (même sur la CI avec caches vides): on ne vas utiliser Babel que sur le code de son app, et utiliser un outil plus rapide (Sucrase) sur les libs, voir carrément sauter l'étape de transpilation (React, Lodash…). Ce transformer est dispo en experimental dans le cli Expo, mais peut aussi être installé facilement via config Metro.

Il mentionne aussi que Metro est lent à démarrer à cause de Haste, un système de résolution de modules interne à Facebook, qu'il faudrait pouvoir désactiver.

L'équipe React-Native a répondu aux questions de la communauté sur Reddit. Quelques infos utiles:

Nouvelle version majeure du bundler Parcel, qui garde sa philosophie “no config”, mais pour autant présente une liste impressionnante de features et de plugins. Des améliorations notables de performance (usage de Rust). La v2 a le meilleur score sur bundlers.tooling.report, page qui compare les features des différents bundlers.