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

React

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.

Extras:

• React & TypeScript: how to type hooks: Pierre propose une bonne intro pour utiliser TypeScript avec les hooks React.

• 4 Patterns You Can Focus On In Your React Code Reviews

• A Visual Guide to React Rendering - Cheat Sheet

• react-router v6.0.0-beta.7: la dernière beta avant la v6 stable?

• Next.js Conf: la conf a lieu la semaine prochaine, et la liste des speakers est dispo et assez conséquente. Guillermo a promis de belles annonces, j'attends la keynote avec impatience. A mon avis il y aura des news du projet Aurora avec Google, du React-18, streaming SSR, server-components, perf, swc...

• React Advanced: une autre belle conf du 22 au 25 Octobre

• Gatsby 4 and the Jamstack Endgame: podcast qui vient de sortir, j'essaie de résumer la semaine prochaine :)

React-Native

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:

• Le renderer Fabric devrait être dispo avant la fin d'année

• Hermes est une piece importante du puzzle: en dehors des performances améliorées, il s'agit aussi de fournir une expérience de debugging unifiée, de réduire les temps de garbage collection pour ne pas bloquer l'execution synchrone de Fabric.

• L'abstraction FlatList devrait être revue, et prendre en compte les hooks, Suspense, la compatibilité avec le web...

Extras:

• Demo Harmony: Evan Bacon présente un nouveau bundler?

• Demo Skia: William Candillon présente un backdrop filter

• One year of React Native Radio (Infinite Red edition)

• React-Native Windows 0.66

💸 Jobs

Cajoo: Dev Fullstack - Remote - 40-75k€ (+BSPCE)

Cajoo veut créer le supermarché de demain 🛒 Nous sommes présents dans 10 villes en France et suite à un investissement de 40M$ de Carrefour nous étoffons l'équipe tech pour créer la stack tech du futur du retail. Les squads s'insèrent dans les 3 streams:

• 🛍️ Consumer: App B2C en React Native, back-office React, backend Hasura & lambdas Node/Typescript

• 🏭 Warehouse: PWA React avec XState pour les opérateur en entrepôt, back-office React, backend Hasura & NestJS

• 🚴 Delivery: App coursiers en React Native sur Expo, back-office React, backend Hasura & lambdas Node/Typescript via Serverless

Notre code est typé de bout en bout avec Hasura en backend qui génère des endpoints GraphQL que nous consommons en frontend avec Apollo et un typing fort via Typescript.

• 🌴 Remote pour les équipes Tech, Produit et Data (avec possibilité de venir dans nos locaux dans le 8ème à Paris)

• 🏄‍♂️🏔️ Offsite chaque trimestre dans un endroit sympa en France (Hossegor, Chamonix)

Une offre ci-dessous t'intéresse? Réponds à cet email!

Smallable: dev React senior - CDI Paris 50-60k (+ CTO)

Ask Mona: dev React confirmé - CDI Paris 45-50k (+ CTO)

Hublo: Node.js React senior - CDI Paris/remote 60-70k (+ EM)

Habx: React TS - CDI Paris - 38-50k

Ponicode: dev JS/React - CDI Paris 40-65k

Shift: dev React senior - CDI Paris/remote 50-60k

Choose: dev React-Native - CDI Paris 50-60k

Splio: dev fullstack React/NodeJS senior - CDI Paris 60-70k

F4: dev NodeJS - CDI Paris 40-50k

Aria: dev NodeJS - CDI Paris - 45-60k

HD Rain: dev backend Node.js React - CDI Toulouse 38-45k

Divers

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.

Extras:

• How to win at CORS: explications de Jake Archibald sur Cross-Origin Resource Sharing, avec un playground

• Jest-Extend v1.0: ce projet déjà assez populaire sort en v1 et propose des matchers Jest supplémentaires

• Covariance and Contravariance in TypeScript: un concept des generics pas évident à comprendre, à étudier au moins une fois

• Jared Palmer recommande pnpm pour diverses raisons

• Addy Osmani recommande des chunks JS entre 30 et 50kb

• Volt: package manager en Rust en cours de développement par un dev de 15 ans 🙉. Censé être plus rapide que Yarn et npm.

• Serverless Cloud: offre managée du framework Serverless

• Nuxt 3 beta: le framework se base sur Vue 3, Vite et Nitro (nouveau "server engine", améliore la portabilité)

• Entrée en bourse de GitLab

Stefan Baumgartner @ddprrt

Tabs vs spaces https://t.co/r5SVjdCh0e