This Week In React #101: Astro, Redwood, Next.js, Remix, React-Admin, Rust reducers, WebComponents, Gatsby, TypeScript, Rome...

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

This Week In React #101: Astro, Redwood, Next.js, Remix, React-Admin, Rust reducers, WebComponents, Gatsby, TypeScript, Rome...

Comments (2)