Aller au contenu principal

📨 #161: useFormState, Memo, Conform, Progressive Enhancement, Astro, Radix, React-Aria, Rustymotion, Ecctrl, Expo Apple Settings, Unistyles, TypeScript, TC39...

· 7 minutes de lecture
Sébastien Lorber
Sébastien Lorber
Editeur - Mainteneur de Docusaurus

Salut à tous !

Cette semaine j'ai trouvé l'écosystème React plutôt calme, mais on a quelques articles assez sympa à lire.

Le progressive enhancement React est à l'honneur aussi bien coté Remix que Next.js!

💡 Consulter cette newsletter sur Twitter - format visuel 🎨

Pour me soutenir:

Ne manque pas le prochain email !

    💸 Sponsor​

    Enterprise Grade APIs for Feeds, Chat, & Video!

    Enterprise Grade APIs for Feeds, Chat, & Video!

    Stream is the maker of enterprise-grade APIs and SDKs that help product and engineering teams solve two common problems at scale: in-app chat and social activity feeds.

    With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch. Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.

    Stream provides robust client-side SDKs for popular frameworks such as React, React-Native, Expo, Flutter, Android, Angular, Compose, Unreal, and iOS. Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.

    Try the new React Video tutorial!

    ⚛️ React​

    The Uphill Battle of Memoization

    The Uphill Battle of Memoization

    On veut créer des applications performantes, et pour cela on utilise React.memo qui évite les re-renders inutiles. Seulement ces optimisations cassent trop facilement. Dominik nous partage plusieurs cas de figure qui conduisent à une dégradation des performances, dont l'utilisation d'objects/callbacks inlinés, ou encore l'usage de slots JSX avec une props comme children.

    J'en ai profité pour donner mon avis sur Twitter: la performance d'un composant React devrait être mieux encapsulée. En attendant le compiler React-Forget, il y a tout de même quelques pistes moins connues à explorer, comme l'usage de plugins Babel.

    Accessible, Typesafe, Progressively Enhanced Modern Web Forms

    Accessible, Typesafe, Progressively Enhanced Modern Web Forms

    Kent nous montre quelques exemples de code Remix et la facilité avec laquelle on implémente pending UI et optimistic UI. Il recommande d'utiliser un schema Zod partagé pour valider les formulaires coté frontend, et de l'étendre coté backend pour éventuellement rajouter des règles supplémentaires. conform facilite l'utilisation d'un schema Zod pour valider un FormData, et semble être une solution très intéressante pour gérer un formulaire React, de l'état local jusqu'au serveur.

    Ne manque pas le prochain email !

      💸 Sponsor​

      A Non-Cloud Alternative to Google Forms that has it all

      A Non-Cloud Alternative to Google Forms that has it all

      If you are looking to set up a robust form management system fully integrated in your IT infrastructure that allows you to retain full control over the data flow, and you don’t want to spend months and thousands of dollars to get it up and running, then SurveyJS is the way to go!

      SurveyJS is a product suite of four open-source JavaScript libraries that allow you to create and edit multiple dynamic JSON-based forms in a drag-and-drop form builder, render them in your React app and store sensitive survey data within your in-house infrastructure. You can then render your custom surveys and forms as editable PDF files in a browser and visualize survey results with interactive charts and tables. Learn more now.

      📱 React-Native​

      Custom Apple Settings UI with Expo

      Custom Apple Settings UI with Expo

      Evan rappelle les quelques avantages d'utiliser l'écran settings iOS. C'est pénible à implémenter nativement, et le ROI est faible, mais son Expo Config Plugin simplifie la tâche. Il explique comment toggle le son d'une app ou encore automatiser l'affichage des licenses logicielles.

      🇫🇷 En français​

      💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !

      À l'abordage de React

      💸 🚀 Formation React approfondie et 100% FR (pré-vente) !

      Découvrez "À l'abordage de React" en pré-vente, avec un accès direct aux deux premiers modules et un accès à vie aux autres modules lorsqu'ils sortiront.

      Notre plateforme interactive et immersive permet un apprentissage efficace et en profondeur de React en Français.

      Offre valable 3 semaines

      🔀 Autre​

      🤭 Fun​

      alt

      A plus 👋


      Ne manque pas le prochain email !