Dev News: React 19 Beta and Redwood Tests React Server Components

React 19 beta includes the React Server Components features from the canary channel and Redwood.js tinkers with React Server Components.

Apr 27th, 2024 4:00am by Loraine Lawson

Featued image for: Dev News: React 19 Beta and Redwood Tests React Server Components

React 19 beta released Thursday and it includes all of the React Server Components features from the canary channel.

New features in this beta include:

Actions. “In React 19, we’re adding support for using async functions in transitions to handle pending states, errors, forms, and optimistic updates automatically,” the team stated in a blog post about the React 19 beta.
New hook: useActionState. This was added “to make the common cases easier for Actions,” the team wrote.
React DOM <form> Actions. Actions are integrated with React 19’s new <form> features for react-dom.
React DOM: New hook: useFormStatus, which makes it easier to write design components that need access to information about the <form> they’re in, without drilling props down to the component.
New hook: useOptimistic. “Another common UI pattern when performing a data mutation is to show the final state optimistically while the async request is underway,” the team wrote. “In React 19, we’re adding a new hook called useOptimistic to make this easier.”
New API: use. There’s a new API to read resources in render: use. This can be used to read a promise, which React will suspend until the promise resolves.

The team also explained a bit more about React Server Components. They are a new option the “allows rendering components ahead of time, before bundling, in an environment separate from your client or SSR server,” the team wrote. The separate environment is the “server” and server components can run once at build time on a CI server or they can be run for each request using a web server, the team explained.

“This means libraries that ship with Server Components can now target React 19 as a peer dependency with a react-server export condition for use in frameworks that support the Full-stack React Architecture,” the team noted.

While React Server Components are stable and won’t break between major visions, alas the underlying API used to implement the components bundler or framework “do not follow server and may break between minors in React 19.x,” the team wrote.

“To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release,” the blog post about the release stated. “We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future.”

Redwood.js Tests React Server Components

While we’re on the topic, Redwood.js, a JavaScript framework, is tinkering with React Server Components by building out documentation. Redwood.js added support for the components in late March.

The team wanted to see how it’d be to build out a documentation site with React Server Component. The resulting document app is called Docwood. They set the following requirements for the project:

The docs site must be a real React app running in the browser and not a statically generated site.
Viewing a doc meant invoking the RSC flow to make a request to a server, where the Markdown would be complied and returned on the fly.
No pre-converted Markdown->HTML stored anywhere, no content stored in a database, no pre-processing of docs files at build time. “However, Redwood’s service caching could be used, since we would still be performing a full RSC request and converting Markdown to HTML on the fly to populate the cache,” they added.

The team explains how to create a new Redwood app from scratch and how to handle routing and navigation. They found that the application was relatively fast considering how much computation is happening under the hood.

“RSC is still being actively developed and new features added every day, so we expect the experience to improve quite a bit between now and the real release of RedwoodJS Bighorn,” the team wrote.

TypeScript 5.5 Beta Includes Long List of New Features

The beta of TypeScript 5.5 became available Thursday.

The first in a long list of new features is inferred type predicates, implemented by developer Dan Vanderkam, who explained that TypeScript can now infer a type predicate for the filter function. He writes that TypeScript will infer a function returns a type predicate if:

The function does not have an explicit return type or type predicate annotation.
The function has a single return statement and no implicit returns.
The function does not mutate its parameter.
The function returns a boolean expression that’s tied to a refinement on the parameter.

Vanderkam wrote in depth about his experience volunteering with TypeScript, with an explanation of how he came to find ideas about how to contribute.

Among the new features added in this beta:

Control flow narrowing for constant indexed accesses.
Type imports in JSDoc.
Regular expression syntax checking.
Isolated declarations.
Explicit types.

This beta also includes a number of improvements to performance and size, wrote Daniel Rosenwasser, the senior program manager of TypeScript.

“In TypeScript 5.0, we ensured that our Node and Symbol objects had a consistent set of properties with a consistent initialization order,” Rosenwasser explained. “Doing so helps reduce polymorphism in different operations, which allows runtimes to fetch properties more quickly.”

That led to “impressive speed wins in the compiler,” he added.

“In TypeScript 5.5, the same monomorphization work has been done for the language service and public API,” he continued. “What this means is that your editor experience, and any build tools that use the TypeScript API, will get a decent amount faster.”

In benchmarks, that’s led to a 5 to 8% speedup in build times when using the public TypeScript API’s allocators, and language service operations became 10 to 20% faster, he wrote.

“While this does imply an increase in memory, we believe that tradeoff is worth it and hope to find ways to reduce that memory overhead.” Rosenwasser said. “Things should feel a lot snappier now.”

The package size was also significantly reduced by making tserver.js and typingsInstaller.js import from a common API library, rather than each producing a standalone bundles. That led to size on disk decreasing from 30.2 MB to 20.4 MB, and reduced the package size from 5.5 MB to 3.7 MB, he noted.

The team has also published an iteration schedule with target release dates.

Loraine Lawson is a veteran technology reporter who has covered technology issues from data integration to security for 25 years. Before joining The New Stack, she served as the editor of the banking technology site Bank Automation News. She has...