This Week In React #108: App.js, Fresh, Reassure, Million, Hydrogen, Gatsby, Treasured, WebComponents, RNW, Zeego, TC39...

#react #reactnative #typescript #javascript

Hi everyone!

This week we celebrate the official death of IE11! 😄

I just came back from the App.js conf in Krakow: a very nice experience that I recommend to any React-Native dev 👌. Check my summary on Twitter!

Lots of interesting releases this week. And with React Summit coming up, it should continue 🤯

🙏 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

Fresh - The next-gen web framework.

Luca Casonato (Deno core team) unveils a new meta-framework for Deno based on Preact. Shares some common points with Next.js and Remix (FS routing, progressive enhancement). Islands architecture for hydration. No build step: compile on the fly. To be tested!

Reassure

A new performance testing tool for React should be open-sourced next week. Measures and counts renders of a given scenario, snapshot them, and generates a report on changes (possible to publish in a PR). Announced at App.js, the tool only supports React-Native for now: web support will come later.

Million.js

Million is a Virtual DOM solution supported by Vercel, which proposes to use a compiler to improve performance and reduce size (inspired by Svelte). The Million + React integration package has just been released. All this seems promising, but not yet ready for production.

Gatsby Launch Week

A digest of the latest Gatsby news, with detailed blog posts on each topic. Some of those topics:

Script Component
GraphQL TypeGeneration
Image CDN GA
Incremental Deploys for All Builds

Shopify - Best-in-Class DX with Vite and Hydrogen

Interesting feedback on the usage of Vite in the Shopify Hydrogen meta-framework. There are advantages in terms of DX via the use of ES modules in dev, but also for the SSR and the integration of React Server Components thanks to its plugin system.

Extras:

📜 How to useMemo and useCallback: you can remove most of them: interesting reflection on the use of memoization hooks
📜 Stress Testing Concurrent Features in React 18: A Case Study of startTransition & 3D Rendering: nice demo that shows the advantages of Concurrent React to keep UI responsive. Based on React-Three-Fiber.
📜 Unit Testing React without Jest: shows how to replace Jest with the Node.js 18 built-in test runner. It's a good start, but doesn't cover everything: mocking, snapshots...
📜 Building Interoperable Web Components That Even Work With React: the official support of Web Components is still expected in React. Possible solution: create a wrapper.
📜 Giving Jest-Preview a Spin: feedback on this new practical tool
📜 First look at Joy UI: new design-system, by MUI
📜 Storybook Component Encyclopedia
📜 Remix Conf 2022: The Overview
📖 useEffect doc - final draft
📦 styleQ: to concatenate classNames in an optimal way (with a memoization system), for CSS compilers. Published by Nicolas Gallagher, this lib is now used in React-Native-Web 0.18.
📦 Treasured: a SDK to convert Unity 3D scenes to web through React-Three-Fiber
📦 Relay 14
🐦 Jonny Burger full-time on Remotion
🐦 The Joy Of React: Josh Comeau's upcoming React course.

💸 Sponsors

💡 How to sponsor this newsletter

Axiom - Zero-Config Observability for Vercel

Axiom enables you to monitor the health and performance of your Vercel deployments by ingesting all your request, function, and web vitals data.

Use Axiom's pre-built dashboard for an overview across all your Vercel logs and vitals, drill down to specific projects and deployments, and get insight on how functions are performing with a single click.

PS: I use it myself to monitor the newsletter signups 😉

Scale Your Meteor Apps Confidently With Minimal DevOps

Meteor Cloud is the only full-service cloud solution engineered for Meteor apps.

You'll be able to host and scale your Meteor app with ease, monitor performance, and reduce time spent on DevOps, all from one centralized dashboard.

Configure your hosting needs to your exact specifications or use intuitive out-of-the-box features designed by long-time Meteor developers.

Save $1,000's per month on DevOps costs with the additional comfort of knowing your app is supported by in-house Meteor experts. Sébastien's readers get a special 30% OFF discount. Grab the offer here!

React-Native

App.js - Mon résumé sur Twitter

It's hard to summarize everything exhaustively. With Expo, mobile DX continues to improve. There is a real craze for web support! New tools available for performance monitoring. Various useful links:

🧵Expo Dev Tools Keynote: EAS Metadata, versioned CLI, config plugins, universal Metro, lazy bundling...
🧵 Sketches: David created sketches for each talk of the conference, giving a good overview.
🐦 Expo Sweet Modules: A new API to facilitate the creation of native Swift/Kotlin modules will be released in Release Candidate this week.
🐦 Shopify FlashList: a powerful alternative to FlatList that will be released soon.
📦 Zeego: cross-platform menu components, from Fernando Rojo.
📦 Universal Design System: Showtime has open-sourced its frontend and cross-platform design-system.
🎥 Live streams: day 1 - day 2

React Native for Web 0.18

React 18 support, introduction of the new styleQ runtime, removes support for older browsers, various improvements. A step toward the ability to statically extract CSS? Nicolas Gallagher questions the usefulness of his project 🤔.

Extras:

📦 react-navigation-bottom-sheet
📦 react-native-volume-manager
🎙️ RNR 238 - Accessibility in React Native

Other

Updates from the 90th TC39 meeting

Various progress of proposals. I'm especially happy for "Symbols as WeakMap keys" in stage-3. It's an important step to be able to use Records & Tuples with React someday 🤗.

Extras: