# This Week In React #161: useFormState, Memo, Conform, Progressive Enhancement, Astro, Radix, React-Aria, Rustymotion, Ecctrl, Expo Apple Settings... --- 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! --- ๐Ÿ’ก Subscribe to the [official newsletter](https://thisweekinreact.com?utm_source=dev_crosspost) to receive an email every week! [![banner](https://thisweekinreact.com/img/TWIR_POST.png align="left")](https://thisweekinreact.com?utm_source=dev_crosspost) --- ## ๐Ÿ’ธ Sponsor [![Enterprise Grade APIs for Feeds, Chat, & Video!](/emails/issues/153/stream.jpg align="left")](https://getstream.io/video/voice-calling/?utm_source=thisweekinreact&utm_medium=sponsorship&utm_content=&utm_campaign=thisweekinreact_July2023_video_klmh22) [**Enterprise Grade APIs for Feeds, Chat, & Video!**](https://getstream.io/video/docs/react/?utm_source=thisweekinreact&utm_medium=sponsorship&utm_content=&utm_campaign=thisweekinreact_July2023_video_klmh22) 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**](https://getstream.io/chat/sdk/react/?utm_source=thisweekinreact&utm_medium=sponsorship&utm_content=&utm_campaign=thisweekinreact_July2023_video_klmh22),ย [**React-Native**](https://getstream.io/chat/sdk/react-native/?utm_source=thisweekinreact&utm_medium=sponsorship&utm_content=&utm_campaign=thisweekinreact_July2023_video_klmh22), 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!**](https://getstream.io/video/docs/react/?utm_source=thisweekinreact&utm_medium=sponsorship&utm_content=&utm_campaign=thisweekinreact_July2023_video_klmh22) --- ## โš›๏ธ React [![The Uphill Battle of Memoization](/emails/issues/161/memo.jpg align="left")](https://tkdodo.eu/blog/the-uphill-battle-of-memoization) [**The Uphill Battle of Memoization**](https://tkdodo.eu/blog/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](https://twitter.com/sebastienlorber/status/1709258817844752794): 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](/emails/issues/161/epicweb.jpg align="left")](https://www.epicweb.dev/accessible-typesafe-progressively-enhanced-modern-web-forms) [**Accessible, Typesafe, Progressively Enhanced Modern Web Forms**](https://www.epicweb.dev/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](https://conform.guide/) 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. --- * ๐Ÿ’ธ [Ably Realtime Hackathon - Create a real-time React app, win $19,000 in prizes - from real-time dashboards to collaborative experiences!](https://ably.devpost.com/?utm_campaign=23-hackathon&utm_source=thisweekinreact&utm_medium=referral) * ๐Ÿ‘€ [Next.js PR - Progressive enhancement for form state](https://github.com/vercel/next.js/pull/55584): Next.js includes a brand-new `useFormState` React core hook (not to be confused with `useFormStatus`), which can be used to manage the feedback/response of Server Actions, even when JavaScript is disabled. * ๐Ÿ‘€ [React core PR - Add Server Context deprecation warning](https://github.com/facebook/react/pull/27424): the secret hook `createServerContext` is deprecated and will be removed. * ๐Ÿ‘€ [Panda CSS Public Roadmap - Container Query, Panda Studio](https://panda-css.canny.io/) * ๐Ÿฆ [Astro View Transition + persistent React-Three-Fiber model demo](https://twitter.com/astrodotbuild/status/1707918024471355406) * ๐Ÿฆ [Remotion contracting with GitHub - Assembled a team to produce GitHub Unwrapped 2023 videos](https://twitter.com/Remotion/status/1707664519403614323) * ๐Ÿ“œ [Sharing State with Islands Architecture](https://frontendatscale.com/blog/islands-architecture-state/): well-illustrated article analysing several possible solutions for getting Islands to communicate in an Astro/React context. * ๐Ÿ“œ [Next.js 13 vs Remix: An In-depth case study](https://prateeksurana.me/blog/nextjs-13-vs-remix-an-in-depth-case-study/): exhaustive, well-documented article comparing many Next.js and Remix features side-by-side. * ๐Ÿ“œ [React Google Maps: Drawing Tools](https://sudolabs.com/insights/react-google-maps-drawing-tools) * ๐Ÿ“œ [Docusaurus - Preparing your site for v3 + MDX 2](https://docusaurus.io/blog/preparing-your-site-for-docusaurus-v3) * ๐Ÿ“ฆ [Astro 3.2 - View Transitions improvements](https://astro.build/blog/astro-320/) * ๐Ÿ“ฆ [Radix Themes 2.0 - New colors, better Tailwind compatibility, many component improvements](https://www.radix-ui.com/themes/docs/overview/releases#200) * ๐Ÿ“ฆ [React Aria - October 2 2023 releases - Client-side routing integration](https://react-spectrum.adobe.com/releases/2023-10-02.html) * ๐Ÿ“ฆ [Rustymotion - A Rust-based renderer for Remotion videos](https://github.com/clearlysid/rustymotion) * ๐Ÿ“ฆ [Ecctrl - React-Three-Fiber character controller](https://github.com/pmndrs/ecctrl) * ๐ŸŽฅ [Theo T3 - Facebook Tried Tailwind, Then Built This Instead (styleX)](https://www.youtube.com/watch?v=PHV94q7BivI) * ๐ŸŽ™๏ธ [This Month in React โ€“ September 2023](https://podcasters.spotify.com/pod/show/reactiflux/episodes/This-Month-in-React--September-2023-e29vb6o) * ๐Ÿ‘ฅ [reactjsday](https://2023.reactjsday.it/) (Verona ๐Ÿ‡ฎ๐Ÿ‡น, Octobre 27) is offering us [\-10% - code "media\_TWIR"](https://ti.to/grusp/reactjsday-2023/discount/media_TWIR) * ๐Ÿ‘ฅ [React Advanced](https://reactadvanced.com/?utm_source=email&utm_medium=thisweekinreact) (London ๐Ÿ‡ฌ๐Ÿ‡ง, Octobre 20-23) is offering us [\-10% - code "REACT10"](https://ti.to/gitnation/react-advanced-london-2023/discount/REACT10) --- ## ๐Ÿ’ธ Sponsor [![A Non-Cloud Alternative to Google Forms that has it all](/emails/issues/155/surveyjs.jpg align="left")](https://surveyjs.io/?utm_source=thisweekinreact&utm_medium=email) [**A Non-Cloud Alternative to Google Forms that has it all**](https://surveyjs.io/?utm_source=thisweekinreact&utm_medium=email) 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](https://surveyjs.io/?utm_source=thisweekinreact&utm_medium=email). --- ## ๐Ÿ“ฑ React-Native [![Custom Apple Settings UI with Expo](/emails/issues/161/exposettings.jpg align="left")](https://evanbacon.dev/blog/apple-settings) [**Custom Apple Settings UI with Expo**](https://evanbacon.dev/blog/apple-settings) 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. --- * ๐Ÿ’ธ [Blitz - Build React Native Apps Faster for iOS, Android, and Web!](https://www.blitz-rn.com/) * ๐Ÿ“œ [Expo EAS - Support for XCode 15 and iOS 17](https://expo.dev/changelog/2023/09-28-new-xcode-ios) * ๐Ÿ“– [Expo Docs - Continuous Native Generation (CNG)](https://docs.expo.dev/workflow/continuous-native-generation/): presents the idea of generating native platforms on an ongoing basis with Expo Prebuild. * ๐Ÿ“ฆ [create-react-native-library v0.34 - local library support](https://github.com/callstack/react-native-builder-bob/releases/tag/create-react-native-library%400.34.0): it's now very easy to generate a local library in React-Native vanilla. Expo supports it too. * ๐Ÿ“ฆ [react-native-unistyles - Level up your React Native StyleSheet, make it cross-platform and scalable](https://github.com/jpudysz/react-native-unistyles) * ๐Ÿ“ฆ [react-native-compressor - Compress Image, Video, and Audio before uploading](https://github.com/numandev1/react-native-compressor) * ๐Ÿ“ฆ [Expo-Image 1.3.4 - Fix libwepb security issue](https://expo.dev/changelog/2023/09-29-libwebp) * ๐Ÿ“ฆ [React-Native-Skia v0.1.211 beta - Animated images](https://shopify.github.io/react-native-skia/docs/animated-images/) * ๐ŸŽฅ [Why did your app crash? How to use Logcat & macOS Console to debug](https://www.youtube.com/watch?v=LvCci4Bwmpc) * ๐ŸŽฅ [Why Airbnb was wrong to ditch React Native in 2018](https://www.youtube.com/watch?v=RwUQnfcxH0o) * ๐ŸŽ™ [React Native Radio 276 - Announcing Ignite v9](https://reactnativeradio.com/episodes/rnr-276-announcing-ignite-v9-expresso) --- ## ๐Ÿ”€ Other * ๐Ÿ“œ [Updates from the 98th TC39 meeting - Resizable ArrayBuffer, ShadowRealm, RegEx escape...](https://dev.to/hemanth/updates-from-the-98th-tc39-meeting-1lcf) * ๐Ÿ“œ [The Absolute Minimum Every Software Developer Must Know About Unicode in 2023](https://tonsky.me/blog/unicode/) * ๐Ÿ“œ [CSS Subgrid - Now available in all browsers thanks to Chrome 117](https://web.dev/css-subgrid/) * ๐Ÿ“œ [CSS Nesting and the Cascade](https://webkit.org/blog/14571/css-nesting-and-the-cascade/) * ๐Ÿ“œ [New to the web platform in September](https://web.dev/web-platform-09-2023/) * ๐Ÿ“ฆ [TypeScript 5.3 Beta - Import Attributes, "resolution-mode" for type imports ...](https://devblogs.microsoft.com/typescript/announcing-typescript-5-3-beta/) * ๐Ÿ“ฆ [string-ts - Strongly typed string functions](https://github.com/gustavoguichard/string-ts) * ๐Ÿ“ฆ [every-ts - A utility to build and bisect any version of TypeScript](https://github.com/jakebailey/every-ts) * ๐Ÿ“ฆ [pattycake - Zero-runtime pattern matching - Optimizing compiler for ts-pattern](https://github.com/aidenybai/pattycake) * ๐Ÿ“ฆ [Node.js 20.8 - Notable performance improvements](https://nodejs.org/en/blog/release/v20.8.0) * ๐Ÿ“ฆ [Vitest 1.0 beta](https://github.com/vitest-dev/vitest/releases/tag/v1.0.0-beta.0) --- ## ๐Ÿคญ Fun [![alt](/emails/issues/161/meme.jpg align="left")](https://twitter.com/creatine_cycle/status/1706912311309652159) See ya! ๐Ÿ‘‹