This Week In React

Share this post

React Hebdo #111: Reassure, Multiplayer Cursors, Next.js, Meteor, Storybook, TanStack, FlashList, Bun...

substack.thisweekinreact.com

React Hebdo #111: Reassure, Multiplayer Cursors, Next.js, Meteor, Storybook, TanStack, FlashList, Bun...

Sébastien Lorber
Jul 6, 2022
Share this post

React Hebdo #111: Reassure, Multiplayer Cursors, Next.js, Meteor, Storybook, TanStack, FlashList, Bun...

substack.thisweekinreact.com

React

Reassure

Reassure est une nouvelle librairie de test de performance en React. Déjà présentée, elle vient juste d'être open-sourcée. Elle permet de poster un rapport dans une pull-request quand des régressions sont detectées. Exemple: un composant qui re-render plus lentement, ou plus souvent qu'avant. Pour l'instant seul React-Native est supporté, mais le support web arrivera très prochainement.

How to animate multiplayer cursors

Un super article intéractif qui propose d'animer le curseur de la souris sur plusieurs browsers en temps réel. C'est un problème plus compliqué qu'il n'en a l'air. Chaque approche est illustrée avec une implémentation React et présente des tradeoffs différents: CSS transitions, spring, splines...

How to Use Next.js Middleware

Article intéractif du même auteur, présentant de nombreux cas d'usage de middleware. Déjà publié ici, il vient d'être mis à jour suite à la sortie officielle de Next.js 12.2 qui comporte quelques breaking changes.

10 Years Of Meteor

Sacha Grief (co-auteur de Discover Meteor, et aussi des sondages State of JS...) fait une rétrospective sur 10 ans de son histoire personnelle avec le framework. Meteor a perdu en popularité, mais largement influencé notre écosystème frontend.

The mystery of React Element, children, parents and re-renders

Nadia met en avant quelques comportements React qui peuvent parfois être surprenants voir contre-intuitifs, et explique dans quel cas un re-render du parent va lancer un re-render de l'enfant.

Storybook Community Showcase #2

Résumé des dernières nouveautés de la communauté Storybook: Component Encyclopedia, Figma plugin, Story Explorer, et divers addons: Variants, CSS variables, Recoil...

The new wave of React state management

Présente les différents problèmes résolus par les solutions de state management et en compare quelques uns. Rétrospective pre/post Redux. Article complet mais assez long: pas évident à lire.

Extras:

  • 🇫🇷 Recapt Juin 2022: résumé de l'actualité React/JS en Juin.

  • 📜 Deploy Next.js 12.2 on Netlify today: démontre la capacité de Netlify à gérer les dernières nouveautés

  • 📜 Use Next.js 12.2 On-Demand ISR to automatically refresh stale data

  • 📖 Thinking in Efffects: nouvelle doc beta en cours d'écriture

  • 🐦 Remix + Svelte

  • 🐦 Astro Preact compat option

  • 🎥 A Fresh new web framework is out

  • 📦 FramerMotion 6.4: nouveau hook useInView()

  • 📦 TanStack Table v8: nouvelle version de React-Table maintenant framework-agnostic. Partenariat avec AG Grid.

  • 📦 storybook-addon-docusaurus

💸 Sponsors

💡 Comment sponsoriser React Hebdo 

Axiom - Zero-Config Observability for Vercel

Axiom vous permet de surveiller la santé et la performance de vos déploiements Vercel en ingérant toutes vos données de requête, de fonction et Core Web Vitals.

Utilisez le tableau de bord d'Axiom pour avoir une vue d'ensemble de tous vos logs et stats Vercel, explorez des projets et des déploiements spécifiques et obtenez un aperçu de la performance des fonctions en un seul clic. 

PS: J'utilise Axiom pour surveiller les logs de ma newsletter 😉

💸 Jobs

Pricemoov - Senior Software Engineer React.js - 55-80k€

Pricemoov est une solution SaaS de pricing dont la mission est de permettre à ses clients d'optimiser leur marge et leurs revenus grâce à une meilleure gestion de leurs stratégies de prix.

Notre siège est à Paris et nous avons ouvert notre bureau à New York en novembre 2021. Fin 2022, on accélère notre internationalisation avec l'ouverture de Singapour. Nous serons plus de 100 collaborateurs d'ici là !

En rejoignant l'équipe Engineering de Pricemoov, vous participerez notamment à la conception d'une architecture front-end intelligente afin de permettre au produit de scaler à l'international. 

Notre ambition technique est l'amélioration continue en visant de hauts standards en terme de qualité de code. Vous y participerez en progressant sur le chemin du software craftsmanship.

Paris 10ème, remote friendly, 55K - 80K+ selon la séniorité technique.

Nabla - Front-end engineer React senior - Paris - 55-90k€

Nabla construit une plateforme de médecine asynchrone (chat sans rendez-vous + appel vidéo si besoin), en automatisant un maximum de tâches répétitives pour que les médecins se concentrent sur le soin et que le service reste accessible à tous.

Ils ont levé 17M€, remporté un award Google Play Best Apps of 2021 et viennent de lancer la première offre payante dédiée à la santé des femmes.

Les fans de hooks React et de Typescript se sentiront à la maison, ainsi que les amateurs de GraphQL, Tailwind, Vite ou Next.js. Pas mal de technos sympa à découvrir (WebRTC et codegen notamment)

Paris 3ème, remote possible, 55k-90k en fonction de l'expérience, + BSPCE.

React-Native

FlashList - Fast & Performant React Native List

Shopify vient de sortir FlashList, son alternative à FlatList pour résoudre les problèmes de performance lors du scroll et éviter d'afficher des cellules vides. Le but est de garder 60fps même sur les appareils Android un peu ancien, sans pour autant compliquer l'implémentation. La librairie réutilise les cellules déjà rendues: il faudra adapter votre usage de key React pour lui laisser la main.

React-Native-Compat-Table

Répertorie le support API de chaque runtime React-Native (JSC, V8, Android...) de manière exhaustive. L'auteur explique également Explique aussi pourquoi React Native recommande la config TypeScript es2017

Extras:

  • 📜 What’s New in React Native 0.69 — How to Upgrade and Why it Matters

  • 🧵 Expo 46 + web: Evan Bacon donne des précisions sur le support web et confirme aussi l'ambition de remplacer Webpack par Metro.

  • 🧵 React-Native vs mobile native trends: le développement d'apps natives semble diminuer.

  • 🐦 FlatList vs FlashList perf comparison

  • 🐦 React-Native vs Flutter diagram

  • 🐦 Webpack Module Federation + React Native

  • 🎙️ RNR 241 - Redux Toolkit vs MobX-State-Tree Showdown

  • 🎥 The React Native Avengers: GestureHandler, Reanimated, and Skia

Divers

Bun - an incredibly fast all-in-one JavaScript runtime.

Un nouveau runtime JavaScript qui vient directement concurrencer Node.js et Deno sur les performances, basé sur JSC (et pas v8) et écrit en Zig. Une toolchain complête avec bundler, transpiler, test runner, client npm... Outil à suivre de pret. On l'avait déjà parlé du bundler Bun l'année dernière mais le scope s'est élargi et la v0.1 vient de sortir.

Extras:

  • Safari Technology Preview 148: :has(), Container Queries, inert...

  • New to the web platform in June

  • Color.js: A library that takes color seriously

  • Faster page loads using server think-time with Early Hints

  • The end of Internet Explorer

  • TransformStream is now supported cross-browser

  • wasmbuild - Using Rust in Deno and Web Apps

  • CSS Cascade Layers – There’s a Polyfill for That!

  • CSS - Breaking Out of a Central Wrapper

  • Vue 2.7 "Naruto"

Twitter avatar for @_developit
Jason Miller 🦊⚛ @_developit
me: why the heck is this CSS not being applied?? my keyboard: I ahve no idae man https://t.co/QTxzHIPqrE
Image
8:42 PM ∙ Jan 18, 2023
Share this post

React Hebdo #111: Reassure, Multiplayer Cursors, Next.js, Meteor, Storybook, TanStack, FlashList, Bun...

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing