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

Hi everyone!

This week we celebrate theofficial 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 mysummary 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 thisemail:feedback is welcome
• Follow onLinkedIn

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). TheMillion + Reactintegration 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 WithReact: 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 toconvert 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 Cloudis the only full-service cloud solution engineeredfor 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 oruse intuitive out-of-the-box features designed by long-timeMeteor developers.

Save $1,000'sper month on DevOps costs with the additionalcomfort of knowing your app is supported by in-house Meteor experts. Sbastien's readers get a special30% OFF discount. Grab the offerhere!

React-Native

App.js - Mon rsum 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 Gallagherquestions 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 useRecords & Tuples with Reactsomeday .

Extras:

• Fastify v4 GA
• Lerna 5.1
• Prettier 2.7: new --cache CLI option and TypeScript 4.7 syntax!
• Rome 0.6
• Tailwind CSS 3.1
• Parcel CSS 1.10
• The End of Localhost
• Patterns for Building JavaScript Websites in 2022
• New in Chrome 102
• WebKit - Meet Web Push