TanStack Redact: A Smaller Runtime for React Applications

TanStack Redact: A Smaller Runtime for React Applications

The React ecosystem continues to evolve. From Server Components and concurrent rendering to modern build tools and performance optimizations, developers have more options than ever when building web applications.

However, one challenge remains particularly important: How can we build React applications that deliver less JavaScript to the browser without sacrificing the developer experience?

This is where TanStack Redact comes in.

Redact is an alternative runtime for React applications that aims to reduce client-side JavaScript while preserving the familiar component model, APIs, and hooks developers already use.

In this article, we'll explore what TanStack Redact is, how it works, how it compares to React, and whether it's worth considering for production applications.

What Is TanStack Redact?

TanStack Redact is an alternative runtime for React applications, designed to provide a smaller and simpler implementation of React's APIs and component model.

It is important to understand that Redact is not a new framework or a replacement for the React ecosystem.

Instead, it provides another runtime option for applications built with React.

Redact supports many familiar React features, including:

• Function Components
• React Hooks
• Context API
• Refs
• Memoization
• Lazy Components
• Portals
• Error Boundaries
• Suspense
• Server-Side Rendering and Hydration

One of its main advantages is that you don't need to rewrite your existing application code or replace your React imports.

You can continue writing familiar React components:

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount((count) => count + 1)}>
      Clicked {count} times
    </button>
  )
}

export default Counter

Redact focuses on changing the underlying runtime rather than changing the way developers write React applications.

Why Did TanStack Build Redact?

React is a mature and powerful library. Over the years, it has introduced increasingly sophisticated capabilities to support modern application requirements.