Tanner Linsley氏が、Reactのコンポーネントやフックの書き方をそのまま引き継げる軽量ランタイム「TanStack Redact」を開発しました。Preactのように互換レイヤーを重ねる方式とは異なり、Reactの公開APIを起点に必要な機能だけに絞って再実装している点が特徴です。
Redactは、優先順位に応じて描画を中断・再開する仕組み(Reactのlaneシステム)を省き、同期描画を採用しています。その結果、startTransitionやuseDeferredValueの挙動がReactとは異なり、useDeferredValueは受け取った値をそのまま返す簡易実装になっています。
Viteとの統合は容易で、アプリ側のコードは通常のReactインポートのままで、プラグインが自動的にRedact実装に解決してくれます。ある商品一覧アプリでの実測比較では、gzip後のバンドルサイズがReactの69,714バイトに対し、Redactは20,112バイトと大幅に小さかったと報告されています。
出典が伝えている要点
- TanStack RedactはTanner Linsley氏によって開発された。
- TanStack RedactはReactのコンポーネントやHooksの書き方を引き継ぐ軽量ランタイムである。
- TanStack Redactはビルドツール経由でReactの実装を置き換える仕組みを採る。
- Preactは互換レイヤーを重ねる設計だが、Redactはそれとは異なりReactの公開APIから出発し必要な機能に絞った実装を構築している。
- Redactは同期描画を採用している。
- Redactは描画を優先順位に応じて中断・再開する仕組み(Reactのlaneシステム)を省いている。
- この設計の結果、startTransitionやuseDeferredValueの動作がReactと異なる。
- Redactの実装ではuseDeferredValueは受け取った値をそのまま返す簡潔な設計になっている。
- ViteでのRedact統合では、アプリケーションコードは通常のReactインポートのままで、プラグインが自動的にRedact実装へ解決する。
- ある商品一覧アプリケーションでの実測比較で、gzip後のバンドルサイズはReactが69,714バイト、Redactが20,112バイトだった。
原文より
Redact は同期描画を採用し、描画を優先順位に応じて中断・再開する仕組みを省いています
出典: azukiazusa.dev