The Weekly Dev's Brew #10 ☕

React Labs is Brewing New Experimental Features

React Labs has just revealed two experimental features ready for testing: View Transitions and Activity. These features have been battle-tested in production environments and are stable enough for you to start experimenting with—though the APIs might still change as feedback pours in.

To try these features, simply upgrade your React packages to the experimental versions react@experimental and react-dom@experimental

View Transitions: Animation Without the Caffeine Crash

React View Transitions make it significantly easier to add animations to UI transitions in your app, powered by the browser's native startViewTransition API. The beauty is in its simplicity—wrap an element in the new <ViewTransition> component to define "what" to animate, then use one of the triggers (like startTransition) to control "when" to animate.

You can create shared element transitions by giving elements the same name, allowing them to animate seamlessly between different states—perfect for image galleries, modals, or any UI that needs to flow naturally between views.

View Transitions aren’t a new API, Astro made it very popular and since most frameworks provide native support. But still React’s syntax is refreshingly pragmatic—instead of tangling with complex animation libraries or fighting browser inconsistencies, React has distilled the solution down to its essence.

Activity: Your UI's Coffee Warmer

The new <Activity> component addresses that frustrating problem we've all experienced: users losing their state when navigating away from a page. With <Activity>, components can be hidden while preserving their internal state, ready to be rendered again when needed.

<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

When an Activity is hidden, it's unmounted but saves its state and continues to render at a lower priority than visible content. This lets you maintain state for parts of the UI not currently in use, or pre-render components the user will likely need next.

It's like keeping your coffee warm while you step away—your state remains intact so users can pick up right where they left off.

Quick Sips

• Storybook 9 Beta: Storybook's most ambitious release yet aims to be a "lean, mean testing machine" with 48% lighter bundle size, a component test widget, and revamped accessibility testing. Perfect for the developer who wants their testing tools as refined as their single-origin espresso.

• Asynchronous Svelte: Svelte's compiler-centric approach now offers a way to use await directly in your code—in <script> blocks, inside $derived expressions, and even in your markup. The asynchronous work happens in parallel by default, making your app feel snappier than a double shot first thing on Monday morning.

• Decade of SolidJS: Ryan Carniato reflects on seven years since open-sourcing SolidJS, which started as a benchmark experiment and evolved into a fine-grained reactivity model that has influenced frameworks across the ecosystem—from Vue Vapor to Svelte Runes and Angular Signals.

• Nuxt 3.17 Released: A major reorganization of Nuxt's data fetching layer brings significant improvements to useAsyncData and useFetch, ensuring consistency across components when using the same key. The update also introduces a new <NuxtTime> component for SSR-safe time display.

• JSR Packages on pnpm and Yarn: You can now install JSR packages directly using both pnpm and Yarn. With pnpm v10.9+ and Yarn v4.9.0+, adding modules from the modern JavaScript registry is as simple as pnpm add jsr:<scope>/<pkg_name> or yarn add jsr:<scope>/<pkg_name>@<version>.

• Categorize Your Dependencies: Anthony Fu suggests using pnpm catalogs to categorize your dependencies beyond just dependencies and devDependencies. This approach enhances communication, simplifies version upgrades, and could integrate with tools like Vite to control dependency optimization more explicitly.

• Node.js Test CI Security Incident: Node.js disclosed a Time-of-Check-Time-of-Use vulnerability in their CI system where attackers could alter pull requests after CI validation. The team has since implemented SHA validation and rebuilt compromised hosts, with Node.js v18 reaching End-Of-Life on April 30, 2025.

• Concurrent Optimistic Updates in React Query: Dominik Dorfmeister’s blog breaks down how to handle optimistic updates when multiple mutations are running simultaneously, preventing the "window of inconsistency" that can cause UI flickering by skipping invalidation when related mutations are still in-flight.

Coffee Fact of the Week ☕

The world's largest cup of coffee contained 26,939.22 liters (7,116.59 US gallons) and was achieved by Tonic World Center in Guanajuato, Mexico on December 10, 2022. The record-breaking brew required 300 kg of coffee beans and a cup measuring 3.5 meters in diameter and 3.05 meters tall. That's enough caffeine to keep an entire development team debugging legacy code for a decade.

See you next week. Happy coding & brewing!