This Week In React #101: Astro, Redwood, Next.js, Remix, React-Admin, Rust reducers, WebComponents, Gatsby, TypeScript, Rome...
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.FCdoes not includechildrenanymore . 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)
💡 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?
🐦 React + TypeScript: no need to import React event handler types
🐦 React 18 +
React.lazy()+ Suspense + SSR: only works with new APIs SSR, notrenderToString.🎥 RedwoodJS Intro by Tom Preston Werner
📦 React-Native-Storybook-Starter: with mobile + React-Native-Web support
💸 Sponsors
Build Internal Apps Remarkably Fast with Retool
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.
BeJSconf: JavaScript Conference In Brussels & Online
BeJSconf is happening in Belgium next May 13th, hosting members of TC39 and core team members of the trendiest JS libraries and frameworks, who’ve got you awesome talks and hands-on practices to let you get deep insights into the insides of JavaScript.
Talks on XState, Components or Multicore JS… are only a few! More importantly, non-tech topics such as leadership, DevRel, DX and such will be on the menu.
BeJSconf is also a way to celebrate and have fun; all with relishing some good Belgian fries and beer during the planned after-event party.
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
💸 Jobs
💡 Sponsor the newsletter to publish a job offer
Showtime - Remote - Top 1% (based on location)
Showtime is a decentralized social network ✨ You can think of it as the "Instagram for NFTs" where you can discover and support your favorite artists, create and showcase your digital art collection and soon be rewarded for the value you create. They plan to help artists reward their fans by letting them earn NFTs (instead of having to buy them).
They are using Expo with Expo Application Services. They are iterating as fast as the web3 ecosystem is moving by using React Native and Next.js together thanks to React Native for Web. They built a high-quality universal design system that works on iOS, Android and Web: Universal UI. They are planning to open-source the frontend monorepo very soon.
They just launched the beta on iOS and Android. Send a message to Axel on Twitter or an email at axeldelafosse@gmail.com to learn more.
PS: I used to work with Henry, one of the engineers at Showtime!
Partners
Start React Native: learn everything about gestures and animations with William Candillon
Adventures in Nodeland: Matteo writes about his journey as a Node.js TSC member and maintainer of 500+ modules on npm, including Fastify and Pino!
TypeScript Weekly: the best TypeScript links every week, right in your inbox
ES.next News: learn about the latest in JavaScript and cross-platform tools
Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
Infinite Red: US React-Native experts making your idea a reality
Software Mansion: the co-creators of React Native and the technological core of many tech companies
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
ECMAScript proposal “Change Array by copy”: four new non-destructive Array methods
With 3 months left before IE retirement, new enhancements arrive in Microsoft Edge for IE mode
