View transitions, activity, and more

#504 – May 04, 2025

Experimental features in React Labs

React Labs: View transitions, activity, and more
25 minutes by Ricky Hanlon

View Transitions make it easier to animate UI changes using the browser's View Transition API, letting developers declaratively define what to animate and when animations should trigger. The Activity component allows hiding UI elements while preserving their state, improving user experience when navigating between pages. Both features are available in experimental release.

How to build a React Login Page Template
sponsored by Clerk

This hands-on guide walks you through building a simple auth system with Express and React, covering both session- and JWT-based approaches. You’ll explore best practices, implement session authentication step by step, and walk away with a ready-to-use React login page template. Ideal for devs looking to secure their frontend apps with real-world patterns.

Parents & owners in React: Context providers
5 minutes by Jules Blom

Jules explains that separating context providers with state into dedicated components creates more efficient rendering patterns by distinguishing between parent and owner relationships in a component architecture. It prevents unnecessary re-renders by ensuring that only components consuming context values are updated when those values change, rather than re-rendering everything.

Which useEffect runs first?
5 minutes by Teng Wei Herr

useEffect hooks run in a specific order when multiple components are involved, with child component effects being executed before parent component effects. This behavior is due to React's Fiber architecture and its depth-first traversal algorithm during the commit phase.

You can serialize a promise in React
7 minutes by Ryan Toronto

Ryan shows a components pattern where a promise starts on the server and completes on the client. React 19 serializes promises through a custom stream-based approach, allowing data to flow between server and client.

What does "use client" do?
13 minutes by Dan Abramov

Dan explores the conceptual significance of the 'use client' and 'use server' directives introduced by React Server Components, arguing that they represent a fundamental advancement in programming paradigms.

Tests are dead. Meticulous AI is here.
sponsored by Meticulous

Meticulous automatically creates and maintains an exhaustive e2e UI test suite that covers every corner of your application – with no developer intervention required whatsoever. Dropbox, Lattice, Bilt Rewards and hundreds of organisations rely on Meticulous for their frontend testing. It is built from the Chromium level up with a deterministic scheduling engine – making it the only testing tool that eliminates flakes.

webdev

javascript

And the most popular article from the last issue was:

newsletters