This Week In React

Share this post

React Hebdo #100: React-18, React-Native 0.68, Redwood, Remix, Next.js, TC39, Node Test Runner, Hydration, Rome

substack.thisweekinreact.com

React Hebdo #100: React-18, React-Native 0.68, Redwood, Remix, Next.js, TC39, Node Test Runner, Hydration, Rome

Sébastien Lorber
Apr 5, 2022
Share this post

React Hebdo #100: React-18, React-Native 0.68, Redwood, Remix, Next.js, TC39, Node Test Runner, Hydration, Rome

substack.thisweekinreact.com

React

React v18.0

React 18 vient de sortir! Cette nouvelle version propose de nombreuses améliorations et APIs dont on a déjà parlé: automatic batching, streaming SSR, Suspense, hydratation selective, nouveaux hooks (useId, useDeferredValue, useTransition...)

Cette release très attendue propose aussi Concurrent React. Le rendu React n'est plus nécessairement synchrone et atomique: il peut être interrompu, mis sur pause et reprendre... Cela permet de découper le travail et garder l'interface réactive.

Ces features concurrentes peuvent être utilisées dès aujourd'hui, mais sont principalement destinées à être encapsulées via l'usage d'une librairie ou d'un framework (intégrations prévues dans Remix, Next.js...).

Ce nouveau renderer peut produire des breaking, et ne s'activera que lorsqu'on utilise les nouvelles features concurrentes de React 18, ce qui permet une adoption incrémentale en douceur. Upgrader React vers v18 ne devrait donc pas être trop compliqué. Si l'app à des problèmes en dev, il est conseillé de désactiver le StrictMode.

Ce qu'il faut retenir: React 18 pose de nouvelles fondations, et de nombreuses innovations sont encore à venir. Dan Abramov qualifie cette release de MVP dont le but est essentiellement de faciliter l'adoption graduelle. Certains comme Paul Henschel (React-Three-Fiber) ou James Ide (Expo) prédisent les impacts potentiels sur les performance.

Je pense qu'on rentre dans une nouvelle ère. De nouveaux frameworks web font parler d'eux en terme de simplicité et performances, comme Svelte ou SolidJS. Contrairement à React, ils sont réellement réactifs et sans virtual DOM.

Le virtual DOM de React à un coût, et je pense que Concurrent React peut difficilement être implémenté sans cette abstraction. Avec React 18+, on va enfin savoir si ce coût vaut la peine d'être payé. Il faudra comparer l'UX, la DX et les performances face à Svelte ou SolidJS, qui sont réellement réactifs et sans virtual DOM.

RedwoodJS v1.0

C'est la Launch Week pour Redwood, avec la v1.0 qui vient de sortir, et une autre grosse annonce prévue Jeudi. Ce meta-framework React inspiré de Ruby on Rails à des opinions plus fortes que ses concurrents, pour vous aider à sortir un produit plus rapidement: Prisma, GraphQL, Storybook, TypeScript, Jest... Son créateur, Tom Preston-Werner (aussi créateur de GitHub, Jekyll...) annonce financer lui même le framework avec $1M de manière durable, plutôt que de passer par la case VC.

Remixing React Router

Les repos de Remix et React-Router vont fusionner sous le nom Remix, et de nombreuses features présentes dans Remix vont être rendues disponibles dans React-Router: data loading, mutations, interruptions, revalidation, race-conditions... Ces abstractions sont pensées pour fonctionner de manière optimale avec Suspense et le pattern "render-as-you-fetch".

Extras:

  • 🇫🇷 Recapt Mars 2022

  • 📜 Remix: The Yang to React's Yin

  • 📜 Improving Web Page Performance at DoorDash Through Server-Side Rendering with Next.JS: super feedback d'une migration complexe.

  • 📜 Hooks Considered Harmful

  • 📜 When Does React Render Your Component?

  • 📜 SSR Date Formatting in Remix using the User's Locale

  • 📜 How Does Shallow Comparison Work In React?

  • 📜 Trying out Ladle - A Storybook Alternative

  • 📜 Why React 18 Broke Your App

  • 🐦 React core team: Brian Vaughn part, Mengdi Chen arrive

  • 🐦 useId() + React keys? ❌

  • 🐦 useDeferredValue mental model: "like debounce but React decides when to bounce"

  • 🐦 JSX && conditionals: dangers à connaitre! Mais il existe des plugins ESLint (1, 2)

  • 🐦 Next.js + Partytown "worker"

  • 🐦 React + Qwik

  • 🎥 The Story of Next.js

  • 📦 React-Three-Fiber: v8.0 (avec support React-Native) + Babel plugin

  • 📦 React Router v6.3.0: compatibilité v5

  • 📦 React Testing Library v13

  • 📦 React-Query v4.0.0-beta.1

  • 📦 Chicane v1.0

  • 📦 Gatsby v4.11

💸 Sponsors

BeJSconf: conférence JavaScript à Bruxelles et en ligne

Rejoignez des membres du TC-39, et des experts chevronnés des librairies et frameworks JS les plus en vogue, qui vous ont préparé des interventions et ateliers impressionnants afin de vous permettre d'apprendre et de comprendre les rouages de JavaScript. 

Retrouvez du XState, Components, ou encore du Multi-core JS… BeJSconf abordera également des sujets non techniques tels que le leadership, l'entrepreneuriat, DevRel, DX et bien d’autres…

BeJSconf sera aussi une occasion de fêter le retour à la normale, notamment à travers l'after-party prévue pour se relâcher et surtout savourer de la bonne frite et de la bière belge.  

React-Native

React Native v0.68

Release importante, puisque c'est la première version de React-Native qui propose d'activer facilement la nouvelle architecture (Fabric et TurboModules) via un flag.

La prochaine version d'Expo (SDK 45) devrait se baser sur la v0.68, mais la nouvelle architecture ne sera pas disponible tout de suite dans Expo Go (mais activable via les custom dev clients)

Extras:

  • 🐦 TypeScript moduleSuffixes: améliore l'intégration TypeScript avec les extensions React-Native (Comp.ios.tsx)

  • 🐦 React Native for Web 0.18 preview

  • 📜 Deep dive into React Native JSI

  • 📜 Ionic vs. React Native: Performance Comparison

  • 📜 How do you cache FlatList.renderItem?

  • 🎥 React-Native-Skia: Neumorphism + Gen-Z mode

  • 🎙️ React Native Radio 230 - We React to News

  • 🎙️ React Native Show 12 - Mobile Payments in React Native

  • 📦 Nx Expo Support

  • 📦 OneSignal Expo Plugin

  • 📦 React-Native-Google-SignIn Expo Plugin

💸 Jobs

💡 Sponsorise React Hebdo pour publier une offre d'emploi

Showtime - CDI Remote - Top 1% (on double ton salaire !)

Vous pouvez considérer Showtime comme le "Instagram pour les NFTs" où vous pouvez découvrir et soutenir vos artistes préférés, créer et présenter votre collection d'art digital et bientôt être récompensé pour la valeur que vous créez. Ils prévoient d'aider les artistes à récompenser leurs fans en leur permettant de gagner des NFTs (au lieu de devoir les acheter).

Ils utilisent Expo avec Expo Application Services. Ils itèrent aussi vite que l'écosystème web3 évolue en utilisant ensemble React Native et Next.js grâce à React Native for Web. Ils ont construit un design system universel de haute qualité qui fonctionne sur iOS, Android et Web: Universal UI. Ils prévoient d'open-source le monorepo frontend dans peu de temps.

Ils viennent tout juste de sortir la beta sur iOS et Android. Envoie un message à Axel sur Twitter ou un email à axeldelafosse@gmail.com.

PS: j'ai travaillé avec Henry, dev chez Showtime !

Front - Développeur Senior Full-stack / Front-end (React / NodeJS) - Remote / Paris - 60-80k€ + stock options

Front en une journée, c'est:

  • 30 déploiements en production sur 1500 serveurs

  • 10 MM d'évènements temps réel

  • plus de 100,000 utilisateurs dans plus de 7000 entreprises

Nous développons une plateforme ayant pour but de réunir tous les canaux de communications d'une entreprise, en alliant collaboration et efficacité. Front est l'outil de travail principal de nos clients et nous devons faire attention à chaque détail: Front est une app très complexe avec une grande exigence de performance. On utilise React, Redux ou encore Styled Components, le tout en Typescript. 

Nous avons 350 collaborateurs, dont 80 développeurs autour de hubs à San Francisco, Paris, Chicago et Dublin. Full remote possible, « Flexible Friday », environnement de travail en anglais, Salaire entre €60K - €72K + stock option (en fonction du niveau d'expérience)

Divers

Updates from the 89th TC39 meeting

Grosse update du TC39 avec en particulier:

  • Decorators en stage 3, en bonne voie pour finalement arriver!

  • Change Array by Copy en stage 3: méthodes immuables sur les tableaux JS! Aussi une étape clé pour que Records & Tuples progresse.

  • Intl.MessageFormat en stage 1: pourrait réduire la taille des apps utilisant React-Intl.

Extras:

  • A Built-in Test Runner Is Coming to Node and Why You Should Care: dans Node.js 18!

  • Release Notes for Safari Technology Preview 142: CSS Container Queries!

  • From Static to Interactive: Why Resumability is the Best Alternative to Hydration: modèle intéressant de Qwik

  • Announcing Rome Formatter

  • How to Write TypeScript Like a Haskeller

  • Conquering JavaScript Hydration

  • How return await can slow down your code

  • Optimising Core Web Vitals on SPAs

  • Cache and Prizes - Serious Platforms Don't Play Favourites

  • TypeScript Optional variance annotations

  • TS Pattern v4.0

  • Boxed: Functional utility types and functions for TypeScript

  • Types as comments: Strong types, weakly held

  • The Ultimate TypeScript Thread

  • WebContainers are out of beta in Chromium

  • Parcel v2.4.0

  • Vite 2.9

  • Understanding CSS Layout Algorithms

  • Picture perfect images with the modern <img> element

  • Those HTML Attributes You Never Use

  • Dum: npm script runner in Rust

  • Storybook Figma plugin beta

  • What’s new in Node.js core? March 2022 edition

  • Astro 1.0 Beta Release

  • 14 Linting Rules To Help You Write Asynchronous Code in JavaScript

  • Node.js community update

  • Edge Functions are now available in Supabase

  • Supabase Functions on Deno Deploy

  • GraphQL is now available in Supabase

  • PlanetScale Rewind: Revert a migration without losing data

  • GraphQL Yoga 2.0

  • Electron v18.0

  • Visible V8

  • Chrome 100 timeline

  • AWS Lambda Now Supports Up to 10 GB Ephemeral Storage

Twitter avatar for @mpocock1
Matt Pocock @mpocock1
Every damn time https://t.co/3qDG8QrWHO
Image
8:42 PM ∙ Jan 18, 2023
Share this post

React Hebdo #100: React-18, React-Native 0.68, Redwood, Remix, Next.js, TC39, Node Test Runner, Hydration, Rome

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