From Hooks To Actions: What's New In React 19

#react #react19 #webdev

With the release of React 19.2, let's explore in brief how you can leverage the latest React features in your applications. Just a heads up, this blog post is more theory heavy. In case you want to see some working examples, I've linked a video in the references as well as the official documentation so that you can experiment with these features on your own time as well.

1. React Compiler

This is the one that's most exciting and anticipated by people in my opinion. React compiler is a build tool that automatically optimizes your app.

Before: review component logic and separate out states or apply memoization manually

After: configure in your bundler and see the magic

There are some caveats here however. Your app needs to follow Rules of React or the compiler will err on the safe side and choose to not apply any memoization automatically in such cases. Also, there may be unintended consequences to optimizing - there may be some bugs due to memoization that weren't there before.

So, how can you safely roll this out?

The React team recommends incremental adoption and has various configurations to support the same.

Feature flag

Dynamically control if the compiler is enabled or not; maybe you can roll it out to some user groups or segments and measure performance

//in your bundler config
gating: {
  source: 'ReactCompilerFeatureFlags', //file name
  importSpecifierName: 'isCompilerEnabled', //function name
},

// ReactCompilerFeatureFlags.js
export function isCompilerEnabled() {
  // Use your feature flag system
  return getFeatureFlag('react-compiler-enabled');
}

Opt in approach

By setting compilationMode: 'annotation', you can then opt in to compiler behaviour for necessary components with the "use memo" directive.

Opt out approach

By default, with just React Compiler enabled, you would have an opt out approach where you can specify components which are not to be processed by the compiler using "use no memo" directive

2. React performance tracks

With React 19.2, a custom set of performance tracks have been added for profiling, debugging and general monitoring in the performance tab of devtools.

Scheduler view : What is React working on?
Blocking (user interactions) / Transitions / Suspense / Idle

Components view : What components are being rendered by react in how much time?

3. Activity API

Activity API lets you break your app into activities. It can be helpful for cases where you might want to conditionally render components or preload parts of your app.

It has two modes : hidden, visible.

Hidden mode:

"saves" internal state for later
when you toggle to visible mode again, previous state is restored

Visible mode:

component loads with restored state

Why is it different from adding display none on elements?

React does do this for visually hiding the components but there is an added benefit here - hidden mode elements rerender at a lower priority, i.e, updates are deferred until thread is idle.

Some common use cases can be:

Preload some slow parts of your app on lower priority
Prerender some content that you know will appear next in a series of steps
Restore hidden components state as you don't unmount the component

4. View transitions API

Fair warning here, this is currently an experimental feature, available in React Canary & Experimental channels.

View transition lets you animate elements inside a transition. So, if you have a startTransition on any action already, you can wrap the relevant component in a ViewTransition and smooth out the user experience.

5. Use API

use is a React API that can consume context or Promise values. The added advantage with use is that it can be called within loops or conditionals. If used with a Promise, it pairs along with <Suspense> and <ErrorBoundary> components to provide an optimal user journey.

6. useEffectEvent

useEffectEvent is a new React Hook that lets you extract non-reactive logic from your Effects into a reusable function. This is super helpful for cases where you might want latest props and state values but not for the effect to run again on changes of those values.