📨 #217: View Transitions, RSC, Next.js, SWR, Nextra, React Router, Rails, Compiler, EAS Hosting, Shopify, Skia, OTP, Gesture Handler, Radon, React-Query, TC55, Bun, CSS...

15 janvier 2025 · 7 minutes de lecture

Editeur - Mainteneur de Docusaurus

🇫🇷 Non traduit :/

Malheureusement, cette page n'a pas encore été traduite en français. Reviens un peu plus tard!

Hi everyone!

This week we continue to notice interesting activity around the upcoming <ViewTransition> component.

Expo is finally launching its universal cross-platform hosting solution, and Shopify shared interesting feedback on its usage of React Native.

Make sure to check our partner conf,️ React Paris 2025 - 🇫🇷 Paris - 20 & 21 March (2 days) / 19th of March (Workshops) - Full Speaker line up just dropped! Jemima Abu, Antoine Chalifour and David Khourshid joined the line up. Get 20% off tickets with code "TWIR”.

As always, thanks for supporting us on your favorite platform:

🦋 Bluesky
✖️ X / Twitter
👔 LinkedIn
👽 Reddit

Ne manque pas le prochain email !

I'm constantly finding interesting things to learn in there.

Dominik DorfmeisterWeb Developer - React-Query maintainer

💸 Sponsor

If It’s Slow, It’s Broken 🐢

Bad performance is just another kind of bug 🐛 . And Sentry helps you find bugs fast, even the ones that aren’t obvious.

Cut chunks of time off of bad API calls
Reduce extremely costly, frequently pinged, or generally slow db operations
Uncover the source of a traffic spike spike in minutes

Whether it’s an error or a slowdown, Sentry helps you fix issues fast and keep your app running smoothly. Because if it’s slow, it’s broken. See for yourself.

⚛️ React

Revealed: React's experimental animations API

Motion creator explains the animation tradeoffs of using View Transitions and why it makes sense for React to directly integrate it into its reconciler through a new <ViewTransition> component. This interactive post shows an early look at the upcoming React feature, including some of its current implementation details, and explains how it overlaps a bit with Motion layout animations.

Keep in mind this exciting new API is still in active development, subject to change, and new PRs keep landing, notably:

👀 React Core PR - Support only View Transitions v2: The new component will leverage recent v2 spec APIs such as view-transition-class, requires Safari 18.2+, and still unsupported in Firefox.
👀 React Core PR - View Transition Class Names based on event kind
👀 Next.js PR - experimental.viewTransition flag: You can try the feature in Next.js 15.2 canary 4.

💸 Product for Engineers - Product management is broken. Engineers can fix it
👀 React website PR - Upgrade to Next.js 15, React 19, enable React Compiler
👀 React Router Milestones: Now communicating what they hope to ship in upcoming releases. v7.2 should include initial RSC support (from loaders/actions), Server Actions, middleware.
👀 Adopting the compiler at Wakelet: Positive feedback, improving LCP and INP metrics. It did not magically solve all the perf issues, but was close to a “free lunch” experience.
📖 Next.js docs - Single-Page Applications with Next.js: This new page notably documents how the newly released SWR 2.3 now allows passing promises in <SWRConfig fallback>, enabling you to seamlessly move data fetching from the client to the server.
📜 Understanding React Server Components: A comprehensive and well-presented overview of RSCs.
📜 Accessibility essentials every front-end developer should know: Accessibility tips with React examples.
📜 Bloated React code? Try component hooks: Reduce cognitive load by extracting a component hook so that the component can solely focus on rendering.
📜 Make FormData and input names type-safe in React: Using hand-made TS, then using Effect.Schema and FP.
📜 Maybe don't navigate(-1) in Remix/React Router: Or how to navigate backward but ensure you never leave the current app.
📜 Should you use MobX-State-Tree with React in 2025?
📜 Become expert in React Query
📦 Next.js React Server Component Testing: An example repository of testing Next.js RSCs using MSW and Playwright.
📦 Nextra 4.0: The Next.js-based docs framework upgrades to App Router among many other things.
📦 Base UI 1.0.0-alpha.5
📦 Superglue 1.0 - React + Rails
🎥 Theo - All the ways HTML gets to your browser
🎥 Simeon Griggs - useOptimistic from React docs to production

Ne manque pas le prochain email !

It's exceptionally well curated, offers great insights and is well worth subscribing to!

Addy OsmaniHead of Chrome DX - Google

💸 Sponsor

Tests are dead - Meticulous is here

Meticulous creates and maintains an exhaustive suite of e2e ui tests with zero developer effort.

This quote from the CTO of Traba sums the product up best: "Meticulous has fundamentally changed the way we approach frontend testing in our web applications, fully eliminating the need to write any frontend tests. The software gives us confidence that every change will be completely regression tested, allowing us to ship more quickly with significantly fewer bugs in our code. The platform is easy to use and reduces the barrier to entry for backend-focused devs to contribute to our frontend codebase."

Meticulous is used by companies like Lattice, Bilt Rewards, Power and many others.

This post from our CTO sets out the context of why exhaustive testing can double engineering velocity.

📱 React-Native

EAS Hosting Preview

Expo unveiled what we expected, the first-ever universal app-hosting platform that completes the vision of bringing the web DX to the cross-platform world. It enables us to seamlessly deploy Expo’s server-related features, notably Expo for Web, API Routes, and Universal React Server Components. It takes into account mobile app subtleties, such as syncing the backend/app versions. You can use either the CLI or CI (EAS Workflows). Under the hood, it’s using Cloudflare Workers. There’s a free plan.

Five years of React Native at Shopify

Shopify successfully migrated all their 6 apps to React Native, and shared a nuanced feedback summarizes well the tradeoffs of using React Native in practice. On the positive side we have: cross-platform support, performance, hot reloading, knowledge portability... You still need native knowledge, and a few things could be improved, such as the debugging experience and the ability to easily upgrade.