TanStack Redact

Every frontend developer knows the unspoken tax of modern web development: client-side bundle bloat.

We love React. We love its component architecture, hook ecosystem, and declarative UI model. But when you inspect a production build and watch the JavaScript runtime push past dozens of kilobytes before your business logic even runs, a quiet frustration sets in. We’ve accepted massive runtimes as the price of admission for enterprise-grade applications.

Tanner Linsley and the TanStack team with TanStack Redact—a bold project designed to answer a single question: What if you could keep React’s developer experience while dropping a massive chunk of its runtime weight?

What Is TanStack Redact?

Redact isn’t a brand-new framework, a fork of React, or an alternative syntax like Preact. Instead, it’s a tiny, alternative implementation of React’s public API designed to slash bundle sizes by 40% to 70%.

The genius of Redact lies in how it integrates into existing projects:

// vite.config.ts
import { defineConfig } from 'vite'
import redact from '@tanstack/redact-vite-plugin'

export default defineConfig({
  plugins: [
    redact(), // Intercepts React/React-DOM imports at build time
  ],
})

You keep writing standard JSX, context, custom hooks, and portals. At build time, the build plugin swaps out standard react and react-dom references for Redact’s lightweight engine. No codebase rewrites, no manual refactoring.

The Catch: Trading Concurrency for Speed

In software engineering, every performance gain comes with trade-offs. To compress a runtime down to roughly a third of React’s standard size, Redact eliminates React’s concurrent scheduler.

Feature	Upstream React	TanStack Redact
Rendering Strategy	Asynchronous & Interruptible	Synchronous
Priority Scheduling	Advanced (Lanes & Time-Slicing)	None (Executes linearly)
Bundle Impact	Full feature footprint	Up to 70% smaller runtime
Concurrent APIs	Active (startTransition, etc.)	Stubbed for compatibility

Standard React prioritizes user interactions (like typing into an input field) by pausing low-priority background renders. Redact strips out this complexity and renders everything synchronously. If an app triggers a heavy update, it will briefly block the main thread—just like classic web architectures.

Where Does It Fit?

With browser integration support across Vite, TanStack Start, Vinext, and Next.js, Redact fits cleanly into architectures where server-side rendering (SSR) or React Server Components (RSC) handle complex data fetching, while client hydration only needs a fast, simple runtime.

It isn't a silver bullet for every app, especially those heavily reliant on fine-grained concurrent scheduling. But for content-rich sites, dashboards, and performance-critical web applications, Redact provides a powerful mechanism to trim unnecessary client bytes.