React Hebdo #105: useEvent, Next.js Layouts, Remix, Storybook, Reanimated 3, Expo 45, Tamagui, TypeScript, Markdoc...
React
React useEvent() RFC
RFC de Dan Abramov qui propose de rajouter un nouveau hook useEvent(fn) dans React core, sans dependency array. La fonction/closure instable passée en paramètre est alors stabilisée (garde la même identité dans le temps). Cela permet d'éviter le problème de stale closure (quand on ne respecte pas les règles ESLint) tout en simplifiant l'optimisation via React.memo(), et éviter les useEffect de se ré-executer. Des changements prévus coté ESLint: la fonction stabilisée n'a pas besoin d'etre passée en dependency array, et une convention "onEvent" / "handleEvent" pourrait être adoptée.
J'ai donné mon avis positif dans la pull-request, qui contient de nombreux commentaires (en particulier sur le nom du hook). C'est vraiment une pièce manquante au design initial des hooks, et les apps implémentent déjà très souvent un workaround basé sur useLayoutEffect.
La video useEvent, the missing React hook donne une bonne vision d'ensemble en 3 minutes.
Next.js Layouts RFC
Next.js va moderniser son infrastructure de routing. Cela permettra de tirer parti des dernières nouveautés de React 18, et celles à venir.
Ils ont prévu une adoption incrémentale: le dossier ./pages continue de fonctionner, mais sera progressivement remplacé par ./app, qui active dans la foulée les Server Components 🤯.
Il y aura un support des nested routes/layouts basé sur une convention de nommagelayout.js. Les requetes vont être executées en parallèle (sans waterfall). Cet article n'est que la 1ère partie de cette grosse RFC: la suite arrive.
Extras:
📜 Building a Design System from scratch: Maxime donne tous les détails sur la création de son design system React personnel, basé sur Stitches
📜 Building a Mini Next.js: Jonas montre comment reproduire le routing file-system de Next.js et
getServerSidePropsen s'appuyant sur Vite et Fastify.📜 Remix and “The Edge”: Jim vient de rejoindre l'équipe Remix et explique comment Remix utilise "The Edge" pour être être à la fois dynamique et rapide.
📜 Storybook Performance: Vite vs Webpack: benchmark intéressant, sur un storybook de 250 composants React. Webpack build toujours plus vite que Vite 🤪.
📜 What the useEvent React hook is (and isn't): l'avis d'un contributeur Solid
📜 Getting started with Markdoc in Next.js: Stripe vient justement d'open-sourcer son outil Markdoc
📜 React key attribute: best practices for performant lists: illustre bien pourquoi il ne faut pas utiliser un index ou random() en key React
👥 Remix Conf: démarre aujourd'hui!
🧑🎓 Advanced-Remix: workshop open-sourcé par Kent C. Dodds
🐦 TypeScript 4.8 + "as props": une amélioration possible?
📦 eslint-plugin-react v7.30: nouvelle règle jsx-no-leaked-render très utile. Cela permet par exemple d'éviter de render un 0 avec
{count && <div>{count}</div>}(ce qui fait d'ailleurs crasher React-Native 😅)📦 Remix 1.5: support officiel Deno
📦 Reagraph: WebGL Graph Visualizations
📦 Playright 1.22: possible de tester les composants React
React-Native
Announcing Reanimated 3
Nouvelle version en RC. Supporte la nouvelle architecture Fabric, mais aussi l'ancienne. Le code Reanimated v2 continue de fonctionner sur la v3, mais l'ancienne API Reanimated v1 est retirée. Bonus: demo Reanimated 3 + RNGH + Screens
Microsoft - React Native Developer Tools
Adam annonce le lancement du projet communautaire React Native Developer Tools. Il s'agit d'un repo (rnx-kit) avec de nombreux outils utiles pour un projet React-Native. Microsoft l'utilise déjà sur divers produits comme Office, Xbox, et Teams.
Extras:
📜 Expo SDK 45: dernière version de React-Native. Nouvelle UI Expo Go. EAS Updates integration. Modules upgradés vers JSI et Sweet API. Nouveau CLI en beta.
📜 Tamagui Beta: outil de dev cross-platform, basé sur un compiler, passe en beta. Sstarter basé sur Expo, Next.js et Solito.
🎥 It's Severance, but in React Native: dernière vidéo de William Candillon avec du Skia, Perlin Noise... Aussi bonne que la série. Les intro/outro Remotion sont de retour 👌
🎙️ The React Native Show - Coffee Talk #2 - Top Resources for Developers
📦 6 clones Expo 45: Spotify, Uber, Netflix, Slack, Twitch, Disney+
💸 Jobs
💡 Sponsorise React Hebdo pour publier une offre d'emploi
Pelico - Front-End Engineer - Paris/Remote - 45-70k€
Pelico développe une plateforme qui agit comme un assistant intelligent et aide les industries complexes, à optimiser la gestion quotidienne de leurs flux opérationnels. Par leurs expertises, les Pelicans collaborent pour réduire le fossé qui s’est creusé entre la technologie et l’industrie.
Tu as de l’expérience sur Single Page Applications avec React / Vue / Angular; tu utilises GraphQL, Redux ou Typescript, tu as expérimenté le Design System (Material UI, Ant Design) et enfin tu as de l’expertise en CSS : rejoint l’équipe Front End!
Salaire selon profile + BSPCE + Bureau à deux pas de Beaubourg + Mutuelle Alan Blue et d'autres avantages bientôt en place.
iFeelSmart - Dev React Native - Paris/Remote - 50-65k€
iFeelSmart, est une nouvelle génération de UI TV. Nous sommes une entreprise à taille humaine avec des millions d’utilisateurs. Nous recherchons des devs React Native ayant une expérience significative et une envie de challenge technique! Voici le décor :
Une équipe Front en ReactNative + équipe Backends multi clients unifiés via un proxy en Go
Une API en JS et un Store Redux, avec du RxJS communs à tous nos devices mais aussi du Vanilla, du TypeScript, du Reanimated 2, et des tests Jest accompagnés de tests end-to-end via Appium
Nombreux challenges : focus via contrôle vocal et télécommande, performances à atteindre en ReactNative sur hardwares spécifiques, future intégration Apple TV...
Une équipe cool ET sérieuse à la fois, venez donc voir :) !
Paris 9 - Terrasse - Hybride Remote possible - 50 à 65K
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.
Divers
