This Week In React #81: Hydrogen, Server Components, Next.js, React-Router, Storybook, State Initializer, Expo modules, TDD, TypeScript...

React

The opinionated React meta-framework created by Shopify has been announced in developer preview (Twitter, blog post, video). It is using React, Vite, Tailwind, GraphQL, React-Query, and a set of tailor-made components and hooks for e-commerce and Shopify API integration.

The vision is surprisingly similar to Next.js: dynamic without any speed compromise (particularly important for e-commerce). Hydrogen relies the latest WIP React innovations such as streaming server-side rendering, and Server Components.

They also plan to provide a hosting solution called Oxygen, also based on V8 isolates at the edge, using their own infrastructure.

Multiple resources have been published

• 🧵 Thread of Ilya Grigorik explains why they built a React framework

• Meet Hydrogen: A React Framework For Dynamic, Contextual And Personalized E-Commerce

• Building Blocks of High Performance Hydrogen-powered Storefronts: the most interesting one for me, more technical details

• Shopify partners with StackBlitz to bring Hydrogen development in-browser

React-Router didn't have any breaking change since v4 in 2017. v6 is re-implementing everything with React hooks, permitting to reduce the size of 50%. The usage with React.Component remains possible. Various changes are reported, but the API remains familiar and intuitive.

v6 takes the best from older versions and bring some novelties:

• React-Router: code splitting, TypeScript support, co-located nested routes, JavaScript config object...

• Reach-Router: automatic route ranking (no need to use exact)

• Layout routes with an <Outlet> component

• Sub-routes are relative to their parent, reducing the boilerplate to created nested routes

• Recommends upgrading: more improvements to come

The migration from v5 or Reach-Router doesn't look too hard. There's a good amount of documentation to help you and retro-compatible packages will be published.

Storybook is a pragmatic tool to display and work in isolation on UI components. But sometimes a component is stateful and props are not enough to initialize the component in the UI state you want.

To handle that annoying issue, Storybook is adding a Component.play() method in which you can use Testing Library to interact with your component and set it up.

Note: it should work with Chromatic too, ensuring visual regressions can be properly captured.

Kent C. Dodds presents a pattern to reset a component to its initial state with a reset() callback.

This is interesting compared to updating a React key: avoids an heavier unmount/remount of the component, or avoids interrupting an animation in an unnatural way (illustrated with a Radio button example).

To create this reset() callback, we must be careful because a prop like initialValue might change over time, and it's important to store the real initial state somewhere.

A nice article showcasing the TDD baby-steps applied to a React component. Note that implementation details are not tested to ensure that the test is resilient to a refactoring. To test styling, I believe there are better tools than TDD, such as Storybook + Chromatic.

Extras:

• Gatsby 4.1

• TypeScript Control flow analysis for destructured discriminated unions: PR of Anders Hejlsberg has been merged, feature that will be very useful for React (destructuring of props, fetch results...)

• File-based routing with React Router: part 2 published, adding code splitting support with the Vite API import.meta.glob and <Suspense>

• 🎙️ Podcast of Swyx & Lee Robinson: Next.js 12, Server Components, Edge Functions, Remix... a lot of interesting subjects!

• 🐦 Addy Osmani comments that Core Web Vitals of our web frameworks are becoming better, with a great progression for Next.js (probably thanks to the Aurora project) and not so bad for React. Note: a progress does not mean that the score is the best, but we can expect that React framework scores will become much more competitive with Server Components!

• 🧵 Houssein Djirdeh of the Aurora project explains what has been shipped and what's planned for Next.js

• 🐦 "React Server Components is such a good idea that we will spend the rest of the decade continuing to explore its implications and applications": Guillermo Rauch

• Recoil 0.5

• Next.js 12 Performance Test: Builds Appear to be Slower, Not Faster: benchmark to be confirmed, no comment from Vercel

React-Native

There's a common misconception among vanilla React-Native developers that using Expo modules will not be possible or that it will significantly increase their app size.

I've also noticed a pattern from auditing multiple apps: people either use many Expo modules, or not a single one, sometimes using lower quality React-Native libraries just to avoid introducing anything from Expo.

Kudo debunks this myth (he believed that too, and actually it was true with the legacy ExpoKit monolith). He explains that an Expo module can be easily installed in any React-Native app and the shared dependency expo is quite small.

Extras:

• React-Three-Fiber: React-Native support PR merged for v8

• Reanimated 2.2.4: already supports React-Native 0.67 (in RC)

• New Skia demos: drawing (code) + shaders

Other

Support of ES modules for Node.js has been delayed.

I particularly like:

• the new Awaited type

• --module 2022, support for top-level await

• Template String Types as Discriminants

• Tail Recursion Conditional Types (useful in particular to recursively parse Template String Types )

• Support for import {type XYZ} from 'lib'

A new Chrome DevTool permits to record and replay a whole user flow. That seems quite convenient to debug some performance problems.

The user flows support in Lighthouse permits to detect problems that appear after the initial page load, like a navigation or a user interaction producing layout shifts.

Until now, performance tooling was quite focused on the initial page load, and I think it's a good thing that we can now measure a complete user flow. This enables to be more objective about the advantages of using a Single-Page-Application. Lighter solution generally win benchmarks against React for content-centric sites, but measuring the initial page load is only one part of the story!

Extras:

• The "package supply chain" attacks persist on npm, with newly compromised packages (coa, rc). See also the npm RFC: Make npm install scripts opt-in. A new attack vector "Trojan Source" has been published: you could merge compromised code in your codebase without even noticing, thanks to Unicode control characters.

• Babel 7.16.0: ESLint 8 and TypeScript 4.5

• The new Rust-based SWC plugin system should land soon

• Error Cause en stage-4: maybe my Tweet can help you figure out why it matters?

• Angular 13: drop of IE11 support and View Engine. Enables Webpack 5 persistent caching. Various API improvements.

• GitHub CEO update: Nat Friedman -> Thomas Dohmke

• Red light/Green Light (Squid Game) with TensorFlow.js

• Towards an animation smoothness metric

• structuredClone: API JavaScript soon available everywhere

Tony Dinh 🎯 @tdinh_me

The ultimate combo https://t.co/FrBdTvATcp