Skip to main content

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

· 6 min read
Sébastien Lorber
Sébastien Lorber
Newsletter Editor - Docusaurus maintainer

Hi everyone!

This week I've found the React ecosystem rather quiet, but we've got some pretty cool articles to read.

React progressive enhancement is in the spotlight in both Remix and Next.js!

💡 Check this newsletter on Twitter - visual format 🎨

To support me:

Don't miss the next 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

    We want to create high-performance applications, and to do that we use React.memo, which avoids unnecessary re-renders. But these optimisations break too easily. Dominik shares with us several scenarios that lead to performance degradation, including the use of inlined objects/callbacks, or the use of JSX slots with a props like children.

    I took the opportunity to give my opinion on Twitter: the performance of a React component should be better encapsulated. While we're waiting for the React-Forget compiler, there are a few lesser-known avenues to explore, such as the use of Babel plugins.

    Accessible, Typesafe, Progressively Enhanced Modern Web Forms

    Accessible, Typesafe, Progressively Enhanced Modern Web Forms

    Kent shows us a few examples of Remix code and how easy it is to implement pending UI and optimistic UI. He recommends using a shared Zod schema to validate forms on the frontend, and extending it on the backend to eventually add additional rules. conform facilitates the use of a Zod schema to validate a FormData, and seems to be an underrated solution for managing a React form, from the local state to the server.

    Don't miss the next 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 points out the few advantages of using the iOS settings screen. It's a pain to implement natively, and the ROI is low, but his Expo Config Plugin simplifies the task. He explains how to toggle an app's sound with a switch, or how to automate the display of your app's software licenses.

      🔀 Other​

      🤭 Fun​

      alt

      See ya! 👋


      Don't miss the next email!