Reid Burke

The React Team:

React 19.2 is now available on npm!

This is our third release in the last year, following React 19 in December and React 19.1 in June. In this post, we’ll give an overview of the new features in React 19.2, and highlight some notable changes.

New features include <Activity /> and useEffectEvent which has been in development for a while now.

Effect Events

Event callbacks now can be split outside of effects. This means event callback dependencies do not need to be in effect dependencies.

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // theme is no longer an event dependency
});

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.on('connected', () => {
    onConnected();
  });
  connection.connect();
  return () => connection.disconnect();
}, [roomId]); // ✅ All dependencies declared (Effect Events aren't dependencies)

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // theme is no longer an event dependency
});

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.on('connected', () => {
    onConnected();
  });
  connection.connect();
  return () => connection.disconnect();
}, [roomId]); // ✅ All dependencies declared (Effect Events aren't dependencies)

Now you can avoid re-running effects for changes to variables which only affect a callback.

This requires upgrading to [email protected] to permit effect events to be excluded from effect dependencies.

Batched Suspense Boundaries for SSR

We fixed a behavioral bug where Suspense boundaries would reveal differently depending on if they were rendered on the client or when streaming from server-side rendering.

Starting in 19.2, React will batch reveals of server-rendered Suspense boundaries for a short time, to allow more content to be revealed together and align with the client-rendered behavior.

This fix also prepares apps for supporting <ViewTransition> for Suspense during SSR. By revealing more content together, animations can run in larger batches of content, and avoid chaining animations of content that stream in close together.

If total page load time approaches 2.5 seconds, React stops batching and reveals content immediately to help fulfill good LCP core web vitals for SEO.

SSR: Web Streams support for Node

renderToReadableStream is now available for Node.js. While React does not recommend using it due to performance concerns, I’m interested to see the performance delta inside projects which already mostly use Web Streams like Hono.

Pino is a very low overhead JavaScript logger. Low overhead is important when you have a lot of logs.

Node.js docs for process I/O:

Warning: Synchronous writes block the event loop until the write has completed. This can be near instantaneous in the case of output to a file, but under high system load, pipes that are not being read at the receiving end, or with slow terminals or file systems, it’s possible for the event loop to be blocked often enough and long enough to have severe negative performance impacts. This may not be a problem when writing to an interactive terminal session, but consider this particularly careful when doing production logging to the process output streams.

If you’re not careful, logs can consume the entire event loop utilization.

Process i/o behavior differences between Terminals, Files, and Pipes

On a related note: process.stdout.write is synchronous when writing to a file or terminal but asynchronous when writing to a pipe. Sim Lijin wrote about disappearing bytes in Node.js which is due to these behaviors. In particular, synchronous writes are used for terminals because process I/O may not complete if you call process.exit(). This causes what may be unexpected differences in behavior. For example, pipes are async:

node -e "process.stdout.write('@'.repeat(128 * 1024));" | wc -c
  131072

node -e "process.stdout.write('@'.repeat(128 * 1024));" | wc -c
  131072

But if you call process.exit(0) while writing to an async pipe, the result is truncated because the async write is interrupted:

node -e "process.stdout.write('@'.repeat(128 * 1024)); process.exit(0);" | wc -c
  65536

node -e "process.stdout.write('@'.repeat(128 * 1024)); process.exit(0);" | wc -c
  65536

If you write to a file, process I/O writes are synchronous, so the entire content is written:

node -e "process.stdout.write('@'.repeat(128 * 1024)); process.exit(0);" >node-stdout-test.out && wc -c node-stdout-test.out
  131072 node-stdout-test.out

node -e "process.stdout.write('@'.repeat(128 * 1024)); process.exit(0);" >node-stdout-test.out && wc -c node-stdout-test.out
  131072 node-stdout-test.out

The reason the async write is 65,536 bytes comes from the pipe capacity of 16 pages. According to man pipe(7):

Before Linux 2.6.11, the capacity of a pipe was the same as the system page size (e.g., 4096 bytes on i386). Since Linux 2.6.11, the pipe capacity is 16 pages (i.e., 65,536 bytes in a system with a page size of 4096 bytes).

Mark Dalgleish:

Recently we shipped a preview of React Router with support for React Server Components (RSC) as well as low-level APIs for RSC support in Data Mode. With the release of React Router v7.9.2, we’re excited to announce that preview support for RSC is now also available in Framework Mode.

To get started, you can quickly scaffold a new app from our unstable RSC Framework Mode template:

npx create-react-router@latest --template remix-run/react-router-templates/unstable_rsc-framework-mode

npx create-react-router@latest --template remix-run/react-router-templates/unstable_rsc-framework-mode

React Router has been developing Framework Mode RSC for some time. Here’s a demo:

Mark continues:

To enable RSC Framework Mode, you simply swap [the React Router Vite plugin] out for the new unstable_reactRouterRSC Vite plugin, along with the official (experimental) @vitejs/plugin-rsc as a peer dependency.

npm install @vitejs/plugin-rsc

npm install @vitejs/plugin-rsc

import { defineConfig } from "vite";
import { unstable_reactRouterRSC } from "@react-router/dev/vite";
import rsc from "@vitejs/plugin-rsc";

export default defineConfig({
  plugins: [
    unstable_reactRouterRSC(),
    rsc(),
  ],
});

import { defineConfig } from "vite";
import { unstable_reactRouterRSC } from "@react-router/dev/vite";
import rsc from "@vitejs/plugin-rsc";

export default defineConfig({
  plugins: [
    unstable_reactRouterRSC(),
    rsc(),
  ],
});

The build output changes from a React Router ServerBuild to a request handler function with the signature (request: Request) => Promise<Response>.

The heavy lifting was moved into RSC Data Mode making the RSC Vite plugin much smaller than the stable Vite plugin:

As noted in our post on “React Router and React Server Components: The Path Forward”, the great thing about RSC is that this new Framework Mode plugin is much simpler than our earlier non-RSC work. Most of the framework-level complexity is now implemented at a lower level in RSC Data Mode, with RSC Framework Mode being a more lightweight layer on top.

k9s is a terminal based UI to interact with your Kubernetes clusters by Fernand Galiana. I use this tool frequently and have sponsored the developer since December 2024.

 brew install derailed/k9s/k9s

 brew install derailed/k9s/k9s

Branch Education:

Inside microchips are nanometer-sized transistors and wires, but how are these nanoscopic structures built? Well, in this video, we’ll explore the EUV Photolithography System built by ASML. This 150-million-dollar machine is essentially a microchip photocopier; it takes the design of a microchip and copies it across hundreds of microchips on a silicon wafer. This EUV Photolithography System is one of the most complex machines ever made, and it encompasses an entire world of science and engineering within it. Specifically in this video, we’ll dive deep into the EUV Lithography tool and explore how 13nm EUV light is produced, how the EUV light is focused onto a photomask, how the photomask, or mask, moves around, what the patterns on the mask look like, the projection optics, and how the wafer moves around and the wafer stage.

Recently CNBC toured ASML facilities around the world — including San Jose, California — to explain the complex production of High NA EUV photolithography.

Via itopaloglu83 on HN.