Hi everyone!

A nice diversity of React articles this week! I liked those with Rust/WASM and Web-Components.

Last week was Launch Week for Astro and Redwood, there were some exciting announcements.

It's calm on the React-Native side.

TypeScript 4.7 is available in beta, another great release with ESM support in particular!

We have more than 4000 subscribers here! Thanks for reading me every week ;)

Note: I'm still figuring out how to make this newsletter sustainable. If your company could sponsor the newsletter (product, job, conf ad) please let me know or put me in touch. I build this newsletter transparently in public, sharing my current income and after 2 years it covers like 50% of my hourly rate. Not too bad, but a little help will be appreciated 😉 I'm still not very good at selling ads on the English newsletter 😅 it seems to require more cold-outreach.

🙏 Support the newsletter:

• 😘 Recommend it to your friends: it really helps!
• 💸 Sponsor This Week In React
• 😍 Write testimonials on Twitter
• 🧵 Retweet the latest Twitter thread
• 📨 Reply to this email: feedback is welcome
• 👥 Follow on LinkedIn

If you like this newsletter, subscribe in priority there:

• 🇬🇧 ThisWeekInReact.com
• 🇫🇷 ReactHebdo.fr

React

Astro Server-Side Rendering

Astro is a modern meta-framework capable of using any UI lib (including React). It now supports server-side rendering, available experimentally in v1.0 beta. Like Remix, the framework offers a layer of adapters for deployment to multiple targets.

React-admin V4: Build Your Own Framework

François takes as an example a simple admin interface in React, based on MUI and React-Hook-Form. The code is initially quite verbose, 90 lines. He gradually refactors this code by creating reusable abstractions, to end up with a declarative and expressive code of 20 lines.

He explains that these abstractions are actually the v4 of React-Admin (v4.0.0-RC.1 available). This new version is based on a more modern stack and is more modular: it exposes high-level components (based on MUI by default, can be swapped) but also low-level primitives to create your own framework. See also the full series of v4 articles.

An Overlooked Factor For Performance Optimization In React

Interesting reflection on the need (or not) to memoize the value of a React context according to the position of the provider in the tree. Personally, I still prefer to always memoize for safety, as you never know if the provider will not be moved somewhere else.

Writing Redux Reducers in Rust

Feedback on the integration of existing Rust business code into a React app through WebAssembly and the challenges encountered: non-ideal binding, serialization WASM bridge cost... They need to access the same state on both sides (Rust and TypeScript). Solution: create the reducers in Rust, and return a state diff to TypeScript.

How to Create and Export Web Components From a React Application

Shows how to use React to create a Web Component. It looks relatively simple, and can be useful in some specific contexts 🤔. Not to be confused with the use of Web Components from React (will be officially supported later).

React components composition: how to get it right

Gives some hints on when/how to split into smaller subcomponents. Also evokes an important Clean Code principle (without naming it): Single Level of Abstraction.

Extras:

• 🧵 React 18 + TypeScript: typings released with necessary breaking changes. In particular the TypeScript type for React.FC does not include children anymore. Also check Removal Of Implicit Children, and this codemod to migrate.
• 📜 Test component interactions with Storybook: complete guide to create and execute interaction tests in Storybook stories thanks to the play() function.
• 📜 How to easily reduce your NextJS bundle size by 30%? feedback, quantified impact of 4 actions relatively easy to implement. Using dynamic imports provides the best ROI.
• 📜 React 18 Quick Guide & Core Concepts Explained: good React 18 major changes summary.
• 📜 Redwood Startup Fund: follow-up of last week's Redwood 1.0 Launch Week. $1M fund by Tom Preston-Werner for startups using React RedwoodJS framework (small "existential" $25k--$50k tickets)
• 📜 Bad Habits of Mid-Level React Developers
• 📜 Improving Web Performance with React Hydration Strategies
• 💡 Gatsby RFC: New Bundler in Gatsby: may incrementally adopt esbuild according to current benchmarks?
• 💡 Gatsby RFC: Script component: similar component to the Next.js one, with a possible Partytown integration?
• 💡 Redux deprecate createStore?
• 💡 Remix deferred API?
• 🐦 React + TypeScript: no need to import React event handler types
• 🐦 React 18 + React.lazy() + Suspense + SSR: only works with new APIs SSR, not renderToString.
• 🎥 RedwoodJS Intro by Tom Preston Werner
• 🎥 React Jargon Explained: What is Concurrent React?
• 📦 React-Native-Storybook-Starter: with mobile + React-Native-Web support
• 📦 Capacitor-Remix-Templates
• 📦 Remix + Crystallize eCommerce Starter
• 🎙️ StackOverflow #430: The new version of React...

React-Native

• 🐦 Expo: Evan Bacon automating Android app deployment: want to go further than Fastlane and allow deploying a new app without any manual step on the Play Store UI (first submission).
• 🐦 React-Native-{Bootsplash,Localize,Permissions}: looking for sponsors to support Fabric
• 📦 React-Native-Bignumber: performant Fabric/JSI big number lib
• 📦 React-Native-Purchase: claims to work with all Expo workflows
• 🎙️ React Native Radio 231 - Using Flipper's Flamegraph Tool

Other

Announcing TypeScript 4.7 Beta

Another great TypeScript release! The long-awaited ES Modules support and package.json "exports" which allows to create several entry points for the same Node.js package. Many other improvements and new features, including "moduleSuffixes" useful for React-Native.

Extras:

• Announcing Rome Formatter: broken link in last edition 😅 Rome offers a code formatter written in Rust. Mostly compatible with Prettier, but 9-12x faster, and able to format invalid code!
• Node v12.22.12: last v12 LTS
• JavaScript Testing Best Practices: updated and translated
• Prevent the introduction of known vulnerabilities into your code: new action GitHub to review PR dependency changes and prevent supply-chain attacks. Seems easy to setup.
• New to the web platform in March: good overview
• Devs For Ukraine: conf 25-26 April
• TypeScript / How the compiler compiles
• TypeScript type-level parser
• Make the TypeScript interface partially optional/required
• Principles of Object-oriented Programming in TypeScript
• TypeScript things I wish I knew earlier
• ECMAScript proposal "Change Array by copy": four new non-destructive Array methods
• Safari Technology Preview 143
• Safari 15.5 Beta Release Notes
• The "inert" attribute is finally coming to the web
• CSS :has( ) A Parent Selector Now
• ShadowRealms -- an ECMAScript proposal for a better eval
• What's new in ECMAScript 2022
• AST Explorer SWC support
• How Tailwind CSS came to be feat
• Nx 13.10 + Nx 15 Roadmap
• Turborepo 1.2
• Parcel CSS 1.8
• ESLint v8.13
• StackBlitz $7.9M Seed Round
• Prisma Adds Support for MongoDB
• 4 ways we use GitHub Actions to build GitHub
• The Next Google
• With 3 months left before IE retirement, new enhancements arrive in Microsoft Edge for IE mode