This Week In React

Share this post

React Hebdo #103: Contentlayer, Remotion 3, Stale Closure, Cross-platform, Jest 28, Hydration, Netlify Edge Functions...

substack.thisweekinreact.com

React Hebdo #103: Contentlayer, Remotion 3, Stale Closure, Cross-platform, Jest 28, Hydration, Netlify Edge Functions...

Sébastien Lorber
Apr 26, 2022
Share this post

React Hebdo #103: Contentlayer, Remotion 3, Stale Closure, Cross-platform, Jest 28, Hydration, Netlify Edge Functions...

substack.thisweekinreact.com

React

Contentlayer: Content Made Easy for Developers (beta)

Contentlayer est un nouveau système qui propose de gérer la glue entre votre contenu (Markdown, CMS, Notion...) et votre code. Vous définissez un schema, et il va valider votre contenu puis le compiler et générer de manière efficace un dossier .contentlayer avec des types TypesScript, et le contenu pret à être directement importé dans votre app. Cela semble améliorer significativement les performances du build. La beta dispose d'une intégration Next.js et permet de réduire la quantité de code d'intégration. Je vous conseille la video d'intro (5min). Nouveau projet de Johannes Schickling, créateur de Prisma, qui fait déjà la glue entre code et DB.

Remotion 3.0

Remotion permet de créer des vidéos programmatiquement, avec du code React (web) et des data/props. Après 10 mois de dev, la v3.0 vient de sortir (trailer) avec en principale nouveauté le support du rendering serverless sur AWS Lambda, ce qui permet de scaler, réduire les coûts, et produire la vidéo beaucoup plus rapidement!

Hooks, Dependencies and Stale Closures

Article intéressant (et intéractif) pour bien comprendre le problème de stale closure en React. Si vous utilisez la memoisation et ne respectez pas la règle ESLint exhaustive-deps, vous risquez d'introduire ce type de problème dans votre codebase, et ça n'est pas toujours simple à debugger.

The challenges of rendering an OpenLayers map in a popup through React

Un retour d'expérience intéressant sur le rendu d'une app React dans plusieurs fenêtres via des portals. Il y a des avantages (un seul state pour piloter toutes les fenêtres) mais aussi quelques problématiques à résoudre.

Extras:

  • 📜 File-based routing with React Location — Nested layouts: le créateur de Generouted continue sa série et explique comment implémenter sois-même les nested routes de Remix, en se basant sur Vite et React-Location.

  • 📜 React Component Composition Explained: la composition peut aider à résoudre le props drilling et améliorer les performances.

  • 📜 Upgrading to React 18 with TypeScript: résumé des breaking changes TypeScript après l'upgrade React 18, et comment automatiser la migration via codemod.

  • 📜 Flexible Design System Components With "as/is" Props: technique utile pour utiliser un composant avec des tags HTML différents en fonction du contexte: <span>, <h1>...

  • 📜 Introduction to React v18 Suspense and Render-as-You-Fetch approach: utilise quelques nouveautés de React 18 pour éviter les waterfalls.

  • 📜 Creating a Rich Text Editor using Rust and React

  • 📜 Create powerful and flexible forms with React Hook Form

  • 📜 Exploring React Suspense with React Freeze

  • 💡 Gatsby RFC: GraphQL TypeScript Generation

  • 🐦 next/link will no longer require <a> as a child

  • 🐦 React + Qwik

  • 🧵 Sebastian Markbåge: "Hydration in React was originally not built for SSR": il y a eu pas mal de discussions intéressantes sur l'hydratation cette semaine, probablement en reaction à cet article de Misko Hevery (créateur de Qwik/Angular)

  • 🧵 Alex Russell on CSS-in-JS: critique des libs avec un runtime

  • 📦 Create-React-App Redux Template v2: update React 18

  • 📦 Jest-Preview: nouvelle solution qui s'intègre avec React-Testing-Library pour voir visuellement vos tests s'executer et les debugger plus facilement.

  • 📦 Rive-React: binding React pour la plateforme d'animation Rive

  • 📦 Jotai-form

  • 📦 MDX-to-MD

  • 🎥 The Official Beginner’s Guide to XState in React

  • 🎥 React for the Haters in 100 Seconds

  • 🎥 Redux in 100 Seconds

💸 Sponsors

App.js Conf 2022 - 8-10 Juin à Cracovie

Après deux longues années, App.js Conf revient avec une conf en personne ! Rencontrez les créateurs de React Native & Expo, apprenez des meilleurs, ou amusez-vous simplement avec d'autres développeurs du monde entier ! Notre line-up est pleine de professionnels du développement mobile prêts à partager leurs connaissances. Découvrez nos incroyables speakers ici !

En plus de la conférence de deux jours, nous avons également préparé des ateliers pratiques d'une journée! Il reste encore quelques places pour deux de nos ateliers :

  • Modern intro to app development with React and Expo par Lydia Hallie et Evan Bacon;

  • Setting up a professional development process with Expo and EAS par la team Expo team!

Réservez les billets pour un atelier avec une réduction exclusive de 20 % pour les abonnés ! Utilisez le code ThisWeekinReact20 ou suivez ce lien pour réserver votre place.

PS: moi j'y vais cette année 😉

React-Native

Migrating React And Native Apps To React Native

Les ingénieurs de Callstack expliquent comment adopter React-Native pour une app existante, avec 2 approaches différentes: greenfield (ré-écriture complete) et brownfield (migration incrémentale). Discute aussi comment porter une application web vers React-Native.

Writing cross-platform components for web and React Native

Artem donne quelques idées pour le développement cross-platform web/mobile. Il propose d'utiliser des composants primitifs, et de prendre une approche web-first: développer dans le browser et tester avec Cypress, puis vérifier que l'app mobile fonctionne.

Extras:

  • 📜 Use Storybook with Nx React Native

  • 🎙️ React-Native-Radio 232 - Flutter is better than React Native...in all the ways that don’t matter

  • 🎙️ The React Native Show Podcast: Coffee Talk #1 - React v18.0 & React Native 0.68

  • 👥 React-Native EU: le Call-For-Papier ouvert jusqu'a fin Mai

  • 📦 React-Native V8 1.0

💸 Jobs

💡 Sponsorise React Hebdo pour publier une offre d'emploi

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

Nabla: Front-end engineer React senior - Paris - 55k-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.

Divers

Jest 28: Shedding weight and improving compatibility

Pas mal de nouveautés et changements. Mes highlights:

  • Support du sharding pour paralléliser les tests

  • Support complet des package "exports"

  • GitHub Actions Reporter

  • Support ESM toujours bloqué

  • jest-runner-tsd: pour tester les types TypeScript

  • jest-light-runner: 2x plus rapide sur la codebase Babel

Building a JavaScript Bundler

Christoph Nakazawa comment créer un bundler JavaScript simple, en se basant sur des packages Jest. Lecture des fichiers JavaScript, création du graphe de dépendances, runtime, assemblage final... Une lecture technique mais qui démystifie bien le fonctionnement interne d'un bundler simple.

Netlify Edge Functions (beta)

Après une tentative ratée (Edge Handlers), Netlify sort une nouvelle offre serverless @ Edge avec ses Edge Functions en beta, en se reposant sur l'infrastructure Deno Deploy. Cela permet notamment de faire tourner de manière plus optimale les meta-frameworks React avec serveur: Remix, Next.js (uniquement middleware pour l'instant), Hydrogen...

Hydration is Pure Overhead

Le créateur de Qwik/Angular continue de questioner le modèle d'hydratation de nos applications avec Server-Side-Rendering, et pousse à adopter un autre modèle plus performant, basé sur la "resumabilité".

Extras:

  • Marko: Compiling Fine-Grained Reactivity

  • Marko for Sites, Solid for Apps

  • Progressive Enhancement and HTML Forms: use FormData

  • Island Architecture

  • V8 - Faster initialization of instances with new class features

  • Learn PWA

  • Div Riots: Our experience with Astro

  • The Future of CSS: CSS Toggles

  • TypeScript and Set Theory

  • JSDB: Use javascript as your database

  • SvelteKit can now run on Vercel Edge Functions

  • How to Use Next.js Middleware on Netlify

  • Vitest VS Code Extension

  • Nx 14.0

  • Deno 1.21

  • Parcel 2.5

  • ESLint 8.14

  • Vitest 0.10

Share this post

React Hebdo #103: Contentlayer, Remotion 3, Stale Closure, Cross-platform, Jest 28, Hydration, Netlify Edge Functions...

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