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
v6 takes the best from older versions and bring some novelties:
Reach-Router: automatic route ranking (no need to use
exact
)Layout routes with an
<Outlet>
componentSub-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.
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.
Extras:
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
Next.js 12 Performance Test: Builds Appear to be Slower, Not Faster: benchmark to be confirmed, no comment from Vercel
React-Native
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.
Extras:
React-Three-Fiber: React-Native support PR merged for v8
Reanimated 2.2.4: already supports React-Native 0.67 (in RC)
Other
Support of ES modules for Node.js has been delayed.
I particularly like:
the new
Awaited
type--module 2022
, support for top-level awaitTemplate String Types as Discriminants
Tail Recursion Conditional Types (useful in particular to recursively parse Template String Types )
Support for
import {type XYZ} from 'lib'
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.
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