π¨ #169: useMemo, 2 Reacts, Next.js, Remix, JS Rising Stars, Docusaurus, Astro, Fresnel, Mutative, JSX emails, Expo usage, React-Native releases, Reanimated, VisionCamera, TypeScript, Rspack, Biome...
Salut Γ tous !
Un petit service pour commencer: est-ce que vous pouvez répondre à cet email pour me dire ce que vous voulez? Un simple "Coucou" ou un retour plus constructif me vont très bien. J'ai changé la manière dont mes emails sont envoyés, et reconfiguré les protocols emailing SPF, DKIM, DMARC. J'ai besoin de faire comprendre aux algos Gmail que mes emails sont bienvenus. Obtenir des réponses à mes emails aide pour cela.
Cette semaine, nous avons un aperΓ§u de l'avenir de React.useMemo, et beaucoup de contenu liΓ©s de Lee Robinson π.
Expo nous montre sa forte prΓ©sence dans l'Γ©cosystΓ¨me React-Native, mais aussi les app stores πͺ
JavaScript Rising Stars 2023 a Γ©tΓ© publiΓ©. Cette annΓ©e, j'ai eu l'occasion de commenter la section React, shadcn/ui et Bun ont Γ©tΓ© les plus gros succΓ¨s. Merci Γ Theo d'avoir recommandΓ© ma newsletter dans sa vidΓ©o d'analyse des tendances : bienvenue Γ tous ceux qui se sont inscrits rΓ©cemment π.
Paris 2024, ce n'est pas seulement les Jeux olympiques : nous sommes aussi de retour dans le monde des confΓ©rences React ! Depuis la fin de React Europe, il manquait vraiment une confΓ©rence React Γ Paris. C'est enfin rΓ©parΓ© avec 3 superbes confs Γ venir π
-
π 22 mars - React Paris - L'Γ©quipe derriΓ¨re React Brussels et BeJS lance une nouvelle confΓ©rence Γ Paris et le programme vient d'Γͺtre annoncΓ© aujourd'hui !
-
π 22-23 avril - React Connection + React-Native Connection - La confΓ©rence d'une demi-journΓ©e sur React-Native que j'ai aidΓ© Γ organiser l'annΓ©e derniΓ¨re a Γ©tΓ© un grand succΓ¨s. Elle revient donc cette annΓ©e sous la forme d'une confΓ©rence de 2 x 1 journΓ©e, ce qui vaut la peine de se dΓ©placer. Le CFP est ouvert jusqu'au 3 fΓ©vrier.
J'essaierai d'assister aux deux, et j'espère y rencontrer certains d'entre vous !
π‘ Consulter cette newsletter sur Twitter - format visuel π¨

Pour me soutenir:
- π Recommande la newsletter! Γa m'aide vraiment beaucoup!
- πΈ Sponsorise la newsletter ou sponsorise-moi
- π§΅ Retweet le dernier thread Twitter
- π¨ RΓ©ponds Γ cet email
- π¬ Rejoins le chat Discord
Ne manque pas le prochain email !

πΈ Sponsorβ
Nlux β A new new React / JS library to create conversational AI web apps
NLUX (for Natural Language User Experience) is a new open-source React / Javascript library that makes it simple to integrate powerful large language models (LLMs) like ChatGPT into your web app or website. With just a few lines of code, you can add conversational AI capabilities and interact with your favourite LLM.
Key features π include:
- Build AI Chat Interfaces In Minutes - High quality conversational AI interfaces with just a few lines of code.
- React Components & Hooks -
<AiChat />for UI anduseAdapterhook for easy integration. - Flexible LLM Adapters -
ChatGPTandHuggingFace, and an API to Create Your Own Adapter for any LLM. - Customisable Chat Personas - Configure bot and user pictures, names, and descriptions for personalised interactions.
- Zero Dependencies - Lightweight codebase, with zero-dependencies except for LLM front-end libraries.
More info, examples and documentation on Nlux.ai

βοΈ Reactβ
The future of React.use and React.useMemo - a powerful alternative to context selectors
Colin explique comment le contexte React peut causer des problèmes de performance, l'absence d'une API de sélecteur de contexte, et comment il a optimisé les performances d'une application grÒce à l'implémentation userland use-context-selector de Daishi Kato.
La partie la plus intΓ©ressante est le rΓ©sumΓ© des rΓ©centes discussions sur Twitter. Dan Abramov a expliquΓ© que les context selectors ne composaient pas bien. Andrew Clark a partagΓ© le projet d'Γ©tendre useMemo() et de permettre l'utilisation d'autres hooks Γ l'intΓ©rieur de celui-ci. Cela fonctionnerait avec le hook use avec n'importe quel type Usable (actuellement React context et Promise, mais peut-Γͺtre Γ l'avenir Observables, stores et autres resources), mais aussi avec les hooks tiers ! Cela rΓ©soudrait le problΓ¨me de la sΓ©lection de data d'une maniΓ¨re performante et composable, et serait compatible avec le compilateur React Forget Γ venir.

Excellent article de Dan Abramov, qui donne de bonnes raisons d'exécuter le code localement (feedback instantané), ainsi qu'à distance (au plus près de la source de données). Il propose une nouvelle formule React : UI = f(data, state), où f représente l'ensemble de votre application React, s'exécutant dans 2 environnements distincts.
Cela se termine par une question intéressante, demandant implicitement si vous inventeriez les React Server Components pour résoudre ce problème.
Is there some way we could split components between your computer and mine in a way that preserves whatβs great about React? Could we combine and nest components from two different environments? How would that work?

- πΈ From Dreamweaver to JSX: The Evolution of Visual Dev Tools for the Web
- π 2023 JavaScript Rising Stars: voir mon commentaire sur la section React.
- π¦ Next.js can now run with HTTPS locally
- π Remix Docs - new Client Data guide
- π Common mistakes with the Next.js App Router and how to fix them: Lee Robinson est en contact avec des centaines de dΓ©veloppeurs Next.js et a recueilli les erreurs les plus courantes. Γgalement disponible sous forme de [vidΓ©o] (https://www.youtube.com/watch?v=RBM03RihZVs). Je dΓ©couvre que la fonction redirect retourne un type never et throw une erreur.
- π How I'm Writing CSS in 2024: Lee Robinson aime CSS en 2024. Il dΓ©crit les contraintes qui font une bonne UX/DX, et le rΓ΄le d'une build step, d'un compilateur ou du streaming. Il recommande les modules CSS, Tailwind CSS ou StyleX.
- π Increasingly miffed about the state of React releases: aucune nouvelle release depuis plus de 550 jours.
- π Executing Dangerously Injected Scripts Inside React Components: technique intΓ©ressante pour contourner les limitations de sΓ©curitΓ© et exΓ©cuter des scripts injectΓ©s via dangerouslySetInnerHTML, en utilisant les Document Fragments.
- π 28 Advanced NextJS features everyone should know: liste et commente diverses fonctionnalitΓ©s moins connues de Next.js, que l'auteur n'a rencontrΓ©es dans aucune des applications sur lesquelles il a travaillΓ©.
- π Things I would change about React to increase DX: liste quelques points douloureux de React, et fais des propositions pour les rΓ©soudre (toutes ne sont pas forcΓ©ment bonnes ni possible).
- π Harmful complexity: using React for static content: opinion intΓ©ressante, mais j'espΓ¨re prouver que l'auteur a tort et que React est intΓ©ressant pour le contenu statique, en particulier avec les RSC et MDX.
- π A new blog for 2024: utilisation d'outils modernes tels que Catalyst, TWC, Contentlayer, Tailwind, Next.js.
- π How to Set Up Soft Navigation Reporting in a React App: Montre l'utilisation du paquet npm Google web-vitals dans une application CRA.
- π Introducing Superglue: React β€οΈ Rails: βSuperglue makes React and Redux as productive as Hotwire, Turbo and Stimulusβ
- π How Lee Robinson created his Guestbook, and you can do it too
- π 2024 Predictions by JavaScript Frontend Framework Maintainers
- π¦ Fresnel 7.0 - React 18 support - SSR compatible approach for responsive layouts for React
- π¦ @tanstack/router-vite-plugin - Vite alternative to the router CLI
- π¦ Docusaurus 3.1 - built-in broken anchors detectors,
parseFrontMatterhook - π¦ Astro 4.1 - Accessibility audit rules, client:visible rootMargin, custom cookie encoding
- π¦ Mutative 1.0 - Efficient immutable updates, 10x faster than Immer
- π¦ JSX email 1.7 - A fork of react-email that keeps being improved
- π¨ Palettify - Get an instant preview for your theme - supports shadcn/ui and soon MUI
- π Remix Resources - Community templates, stacks and libraries
- π₯ Jack Herrington - HTMX For React Developers in 10 Minutes
- π₯ Lee Robinson - React Server Components: the Good, the Bad, and the Ugly
- π₯ Remix Singles - "Trellix" - Cookies, Auth, and Drag & Drop: playlist officielle Remix qui créé un clone Trello (demo app).
Ne manque pas le prochain email !

πΈ Sponsorβ
CMS with Inline Visual editing for Next.js, Remix and Gatsby
Set up a project in just 1 minute with the CLI and define your own Visual blocks as React components to convey your pixel-perfect corporate brand, using any CSS framework.
Content editors can easily use these blocks to compose pages visually, just like using a word processor, without compromising the design system.
React Bricks is enterprise-ready with Digital Assets Management, Advanced SEO, Collaboration, Scheduled Publishing, Multilanguage, Integrations with external data sources, Approval Workflow, Single Sign-On, Multiple environments, Backup and Change history.
Trusted by corporate clients such as The Weather Channel, Deel.com, La Banque Postale, leading eCommerce sites and over 8,500 users worldwide.
Get started today!

π± React-Nativeβ
Evan Bacon a rassemblΓ© une liste impressionnante de 1599 applications qui utilisent les libs Expo (et donc React Native). La liste comprend des noms connus comme Pizza Hut, Burger King, Microsoft, Discord, Shopify, NFL, Walgreens, Amazon, CNN, et bien d'autres encore. Ce n'est pas une grande nouvelle pour nous de voir React Native prospΓ©rer, mais il est apprΓ©ciable de confirmer la prΓ©sence de nombreuses apps dans le top de l'App Store.

- πΈ Galaxies.dev - Master React Native & Save 25% on PRO with code GALAXIES24
- π Proposal: Hover style API for iPad / Apple Vision Pro: l'iPad prend en charge les effets de survol hover pour les utilisateurs de la souris ou du trackpad, ce qui sera Γ©galement utile pour le future support de Vision Pro d'Apple, dans lequel les Γ©lΓ©ments de navigation sont mis en Γ©vidence lorsque l'utilisateur les regarde.
- π Introduction to Reanimated: Un bon article d'introduction pour apprendre les concepts derriΓ¨re l'une des bibliothΓ¨ques d'animation les plus populaires, couvrant les shared values, reanimated styles et animated views.
- π¦ React-Native v0.73.2 + v0.72.9 + v0.71.15: nouvelles releases qui fixent l'erreur a build iOS "Error installing boost Verification checksumβ, et quelques autres nouveautΓ©s.
- π¦ react-native-vision-camera 3.7.0: inclut dΓ©sormais un Expo config plugin pour activer facilement le scanner QR/Barcode entiΓ¨rement natif.
- π₯ Theo - Moving off React Native: Clickbait, mais intΓ©ressant. Theo discute de la migration d'Alan (π«π·) de βvanillaβ React-Native vers Expo.
- π₯ Szymon Rybczak - Bringing React Server Components to React Native
- π₯ Simon Grimm - THE React Native Tech Stack for 2024

π«π· En franΓ§aisβ
- π Expo Router (version 2). Mise en place et configuration d'un projet
- π₯ React nβest pas une qu'une librairie web
- π₯ Actus JS de la semaine - Top 10 des projets JS de 2023, shadnc/ui, Bunβ¦

π Autreβ
- π TypeScript 5.4 Iteration Plan -
NoInfer<T>, throw expressions... - π Daniel Rosenwasser on TypeScript and Whatβs Ahead in 2024
- π Weird things engineers believe about Web development
- π The Website vs. Web App Dichotomy Doesn't Exist
- π The Popular Vote of Interop 2024
- π¦ Biome 1.5 - 97% Prettier compat + 2024 Roadmap
- π¦ Node 20.11 - improves test_runner, import.meta, perfβ¦
- π¦ Rspact 0.5 - Module Federation

π€ Funβ
A plus π
Ne manque pas le prochain email !









