Quick Start

Choose the integration that owns your build:

The Vinext and Next.js guides record the tested versions and coverage. For Vite, add Redact to your existing configuration and keep your React or framework plugin in place.

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

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

Your application code stays familiar.

import { useState } from 'react'
import { createRoot } from 'react-dom/client'

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

createRoot(document.getElementById('root')!).render(<Counter />)

The plugin handles client and SSR builds. The RSC environment stays on upstream React so @vitejs/plugin-rsc can own Server Component serialization.

Check your app#

Run your tests and production build. Check hydration, forms, portals, navigation, and third-party components. Check pending transitions, actions, and optimistic state in your own journeys. Redact keeps rendering passes synchronous, without React's time slicing or interruptible component renders.

Read Compatibility before shipping. Keep hydration enabled in apps that use hydrateRoot.