One plugin. Same imports.
-pnpm add @tanstack/redact
-
- Add redact() to your existing Vite plugins, keep
- your framework and React plugins in place. The plugin aliases
- React, React DOM, server rendering, scheduler, and JSX
- entrypoints for client and SSR builds.
-
{`// Your application code stays familiar.
-import { useState } from 'react'
-import { createRoot } from 'react-dom/client'
-
-function Counter() {
- const [count, setCount] = useState(0)
- return (
-
- )
-}
-
-createRoot(document.getElementById('root')!).render(
- - Redact is a React-compatible runtime, not a complete - implementation of every React behavior. Check the compatibility - differences below before switching an existing app. -
-Less runtime to download.
-| Runtime | -Gzip size | -
|---|---|
| React 19.3.0 | -69,162 bytes | -
| Redact, default Vite configuration | -23,311 bytes | -
| Redact, native animation enabled | -28,159 bytes | -
- The default bundle was 66.3% smaller in the Redact 0.1.0 release - measurement from September 11, 2026. These are runtime sizes, - your app will tree-shake differently, and the runtimes have - different scheduling capabilities.{' '} - - Measurement inputs and configurations ↗ - -
-- Measured separately in the same release, the default DOM-client - entry is 20,139 bytes gzipped and the nano DOM-client entry is - 12,466 bytes. The React API entry is 2,764 bytes. These entries - overlap, their sizes are not additive. Nano disables all - optional features and is not a full-compatibility preset.{' '} - Choose your feature flags. -
-- Performance depends on the workload. Published microbenchmarks - include faster state updates and slower hydration and Suspense - retries. They do not establish whole-app speedups.{' '} - - Read the performance measurements ↗ - -
-Know what changes.
-- Redact keeps the React component model and everyday APIs, while - leaving out concurrent scheduling. These behaviors describe the - default Vite configuration. -
-| Area | -Redact behavior | -
|---|---|
| {area} | -{behavior} | -
- Native view transition animation is experimental and opt-in. - Production animation, hidden-tab behavior, broader resource and - navigation races, and Safari and Firefox remain unverified.{' '} - - Full API support reference ↗ - -
-Only ship the parts you use.
-
- The default full preset enables every optional
- feature except native animation. Disable behavior your app does
- not use, or start with nano and turn features on
- individually. Overrides merge with the preset.
-
{`// A client-rendered app without class components
-redact({
- features: { hydration: false, classComponents: false },
-})
-
-// Every optional feature off, then context enabled
-redact({ preset: 'nano', features: { context: true } })
-
-// Experimental native view transition animation
-redact({ features: { viewTransitions: true } })`}
-
- Disabling a feature changes behavior, it does not just remove an
- unused export. The nano preset is not a
- full-compatibility preset. Feature size savings overlap and are
- not additive.
-
| Feature flag | -When disabled | -
|---|---|
- {flag}
- |
- {behavior} | -
Vite plugin reference
-{`import { redact } from '@tanstack/redact/vite'
-
-redact({
- preset: 'full',
- features: { viewTransitions: false },
-})`}
- | Option | -Purpose | -
|---|---|
- preset
- |
-
- 'full' | 'nano', defaults to{' '}
- 'full'.
- |
-
- features
- |
- - Boolean overrides for the feature flags above. - | -
- skip
- |
- - An array of import specifiers to leave out of aliasing. - | -
- resolveFrom
- |
- - Package resolution root, defaults to the Vite config root. - Useful in monorepos. - | -
- packageRoots
- |
- - A map of package names to absolute package directories, - bypassing node_modules lookup for local builds. - | -
- For runtime internals and manual configuration, see the{' '} - - development guide ↗ - - . -
-Try it with your app.
-- Run your tests and production build, then check hydration, - forms, portals, navigation, and any third-party components your - app uses. Pay particular attention to code that depends on - pending transitions, actions, optimistic state, or React - DevTools. -
-- The repository publishes{' '} - - browser test results - - ,{' '} - - real-app integration checks - - , and{' '} - - benchmark reproduction instructions - - . Use those alongside your own app's checks when deciding - whether to switch. -
-