Redact

For the love of React, and smaller bundles.

We love React, and we want to keep writing it. Redact is an alternative runtime for React apps, with a smaller footprint and synchronous rendering. Keep your components, hooks, and imports, and try it with one Vite plugin.

Docs

≈3× smaller33.7% of React's runtime bundle size in our default benchmark 12.5 kBnano DOM client, gzipped

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { redact } from '@tanstack/redact/vite'

export default defineConfig({
  plugins: [react(), redact()],
})

42.2Ktotal downloads 4,529weekly downloads 420GitHub stars

Still writing React.

React's component model is the reason we built this. Redact keeps that familiar way of building apps, including server rendering, Fast Refresh, and React DevTools, while exploring how small the runtime underneath it can be.

We trade concurrent scheduling for a smaller, synchronous runtime. Streaming SSR, hydration, and Suspense are still on board.

API differences ↗

Counter.tsx

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  )
}

How small do you want to go?

Leave out class components if you don't use them, drop hydration if you're rendering everything on the client, or start with nano and build up from there. Every optional feature starts off, you choose what comes back.

Feature selection

// A client-rendered app without class components
redact({
  features: { hydration: false, classComponents: false },
})

// All optional features off, then context enabled
redact({ preset: 'nano', features: { context: true } })