# 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:

```typescript
// 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**.

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Feature</strong></p></td><td colspan="1" rowspan="1"><p><strong>Upstream React</strong></p></td><td colspan="1" rowspan="1"><p><strong>TanStack Redact</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Rendering Strategy</strong></p></td><td colspan="1" rowspan="1"><p>Asynchronous &amp; Interruptible</p></td><td colspan="1" rowspan="1"><p>Synchronous</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Priority Scheduling</strong></p></td><td colspan="1" rowspan="1"><p>Advanced (Lanes &amp; Time-Slicing)</p></td><td colspan="1" rowspan="1"><p>None (Executes linearly)</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Bundle Impact</strong></p></td><td colspan="1" rowspan="1"><p>Full feature footprint</p></td><td colspan="1" rowspan="1"><p>Up to 70% smaller runtime</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Concurrent APIs</strong></p></td><td colspan="1" rowspan="1"><p>Active (<code>startTransition</code>, etc.)</p></td><td colspan="1" rowspan="1"><p>Stubbed for compatibility</p></td></tr></tbody></table>

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.