Unlock seamless workflows and faster delivery with our latest releases – get the details
Back to changelog

Sanity packages precompiled with React Compiler Beta for improved render time and latency, and updates to History UI in Sanity Studio

✨ Highlights

React Compiler Beta

The sanity and @sanity/vision packages are now precompiled with the React Compiler.

So far, 1,231 out of 1,411 components have been compiled, resulting in a 20%-30% overall reduction in render time and latency. We anticipate even greater improvements as we refactor the remaining 180 components to support auto-memoization.

For several weeks, we’ve already been shipping key packages—including our design system (@sanity/ui), the PortableText editor (@portabletext/editor), and react-rx (responsible for state management across Sanity Studio)—precompiled with the React Compiler.

We continue to see impressive results in our profiling and analysis, and with the release of React Compiler in beta we are excited to add support for auto-memoizing your own studio code:

# install using npm
npm install --save-exact react-compiler-runtime@beta && npm install --save-exact --save-dev babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

# install using yarn
yarn add react-compiler-runtime@beta && yarn add --save-dev babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

# install using pnpm
pnpm add react-compiler-runtime@beta && pnpm add --save-dev babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

And in your sanity.cli.ts add:

import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
   api: {
      projectId: 'abc123',
      dataset: 'production',
   },
   reactStrictMode: true,
+ reactCompiler: {target: '18'},
})

If you decide to give the React Compiler a try make sure you share your feedback and experience using it with the Working Group!

Sanity plugin authors, provided they're using @sanity/pkg-utils, can also ship pre-compiled plugins by running:

# install using npm
npm install --save-exact react-compiler-runtime@beta && npm install --save-exact --save-dev @sanity/pkg-utils@latest babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

# install using yarn
yarn add react-compiler-runtime@beta && yarn add --save-dev @sanity/pkg-utils@latest babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

# install using pnpm
pnpm add react-compiler-runtime@beta && pnpm add --save-dev @sanity/pkg-utils@latest babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

and changing the package.config.ts to:

import {defineConfig} from '@sanity/pkg-utils'

export default defineConfig({
   // ...
+ babel: {reactCompiler: true},
+ reactCompilerOptions: {target: '18'},
})

History UI updates

The history inspector UI has been updated to display edits collapsed into the Published event they belong to. From and To revision selectors are added to the top of the inspector.

Install or upgrade Sanity Studio

To initiate a new Sanity Studio project or upgrade an existing one, please refer to our comprehensive guide on Installing and Upgrading Sanity Studio.

If you are updating from a version earlier than 3.37.0, you should also check out this article to ensure your dependencies are up to date.

Published November 26, 2024