React Hebdo #94: 2 ans 🥳️, memoization, composition, Remix, Next.js, Gatsby, React-Native, Windows, CSS, TypeScript, npm, SWC...

Bonjour à tous!

🥳️ C'est les 2 ans de la newsletter 🥂 Et on va aussi passer les 2500 abonnés cette semaine!

Merci à vous de me lire et soutenir chaque semaine! Certains me lisent depuis vraiment longtemps maintenant, parfois depuis la toute 1ère édition partie un 13 Février 2020. Ca fait plaisir d'avoir eu autant de feedbacks positifs qui m'ont incité à continuer.

Je prépare un site web en Remix. Ca serait vraiment fantastique si vous pouviez m'écrire un témoignage sur Twitter ou LinkedIn. Il va m'en falloir quelques uns à mettre sur la landing page pour convaincre les futurs abonnés de s'inscrire 😏

J'en ai déjà, mais c'est souvent des emails privés ou des réponses, commentaires, repartages: j'aimerais avoir des avis publics (lien possible) qui expliquent avec vos propres mots ce que vous aimez dans cette newsletter, et dont le texte peut être compris en isolation: c'est plus adapté pour une landing page.

Si l'histoire de cette newsletter vous intéresse, j'ai créé une page surIndie Hacker, je raconte tout ça de manière transparente. Je compte faire des mises à jour mensuelles. N'hésitez pas a poser des questions!

🙏 Pour soutenir la newsletter: 

Vladimir explique que parfois useMemo n'est pas suffisant, et on a parfois besoin de partager un cache entre plusieurs composants. Il propose 5 façons différentes de cacher les données de manière globale en dehors de ses composants React, de la constante au cache LRU.

Mon avis: les WeakMap peuvent aussi être une solution. Et pourquoi pas mettre le cache dans un contexte React.

Nadia donne de bonnes raisons pour utiliser la composition en React. Elle prend en exemple un bouton avec texte + icone. Elle propose 3 alternatives et les compare sous différents angles:

Personnellement je n'aime pas trop la 1ère qui repose sur cloneElement pour appliquer des props par défaut sur l'icone.

Alexandre nous présente un plugin Flipper pour mesurer les performances (FPS UI et JS Threads) en continu et calculer un score comme Lighthouse.

Il donne aussi 4 astuces pour mesurer efficacement, et présente un cas concret d'utilisation sur l'appli TF1, qui a amélioré les perfs (score 40 à 90).

Sponsorise React Hebdo pour publier ton offre d'emploi

Cajoo: Dev & Architecte Fullstack - Remote - 40-90k€ (+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:

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.

Maki : Développeur Frontend / Fullstack Senior - 65k / 80k

La mission de Maki est de permettre à chaque entreprise de recruter des talents sur mesure. Maki propose des tests d'évaluation standardisés avant l'embauche pour identifier les meilleurs candidats et accélérer les décisions des entreprises, sans préjugés.

Si comme nous vous aimez résoudre des problèmes complexes de façon simple, à l'aide d'outils modernes (ping TypeScript, React-Query, MUI, Playwright, …), afin de proposer des expériences fluides et efficaces, le tout dans une ambiance décontractée (si si), alors venez discuter avec nous :)

Paris 9ème - full remote possible - 65k / 80k en fonction de l’expérience + BSPCE

Une bonne introduction sur CSS Cascade Layers, une nouvelle feature CSS à ne pas manquer! Elle semble arriver assez vite dans nos navigateurs, et même si c'est pas encore utilisable (pas de polyfill) ça vaut le coup de s'y intéresser dès aujourd'hui.

Les cascade layers donnent un controle additionel sur la cascade CSS et l'ordre d'application des règles CSS, ce qui peut régler des problèmes liés à l'ordre d'insertion, la spécificité ou encore limiter l'usage de !important.

Si vous n'avez qu'une minute, regardez cette animation. C'est comme si le browser retriait votre CSS au lieu de se contenter de l'ordre initial du fichier CSS. Ca me fait penser aux hooks React 😅.

Pourquoi c'est important? Parce que les bundlers et outils frontend actuels n'ont pas vraiment de règles pour emettre votre CSS dans le bon ordre. Par exemple, avec Webpack, CSS loader, code-splitting et imports dynamiques, est-ce que vous savez vraiment dans quel ordre votre CSS importé apparaitra sur la page finale? Pas moi 🤷‍♂️!

Avec cette nouvelle feature, notre CSS pourrait devenir plus portable. Si vous changez de bundler ou de framework (et donc potentiellement l'ordre d'insertion CSS), vous n'avez pas forcément envie de devoir tout réécrire et fixer de nombreux bugs CSS liés au changement d'ordre.

Ca bouge bien coté CSS en ce moment. Voir aussi le projet Interop 2022: les features sur lesquelles les browsers vont travailler cette année pour apporter une bonne compatibilité. Les Cascade Layers sont dedans!