DEV Community

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

Posted on • Updated on

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:

If you like this newsletter, subscribe in priority there:


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-Native

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:

CleanShot 2022-04-13 at 10 24 54@2x

Top comments (0)