SynState

特徴

シンプルな状態管理

React の useState / useReducer に似た使いやすい createState と createReducer でグローバル状態を管理。

非同期オペレーター内蔵

debounce、throttle、switchMap など — 複雑な非同期処理を外部ライブラリなしに統一的な宣言的 API で記述。

operator を通してもグリッチフリー

更新はどれも、届く先を深さ順にたどる 1 回のパスです。debounce や switchMap が後から始める更新も同じです。そのため subscriber が更新途中のグラフを見ることはなく、1 回の更新のコストはノード間の経路の数ではなく、届くノードの数に比例します。effect で書いた operator が何を失うかは Signals の上の operator を参照。

非常に高速

ベンチマークの概要では、SynState はどのシナリオでも最速のライブラリの 2.7 倍以内に収まります。すべてのシナリオで計測したライブラリのうち、最悪のケースでも1桁倍に収まるのは SynState だけです。ライブラリごとの最悪のケースはベンチマークを参照。

軽量

~7.7 kB min+gzip、外部ランタイム依存は 2 つ（一方がもう一方に依存している）。ほかのライブラリと比べる。

React 最適化

React Compiler と完全互換。synstate-react-hooks により数行でコンポーネントにグローバル状態を導入。

フレームワーク非依存

コアはバニラ JavaScript、Vue、Svelte など任意のフレームワークでそのまま動作。React / Preact 向けには hooks ラッパー、Preact 向けにはさらに Preact Signals 連携も用意。

SynState で UI まで: synstate-dom

synstate-dom は Observable を DOM に直接結び付けるので、非同期の処理も含めて UI 全体が 1 つの SynState のグラフになります。コンポーネントは一度だけ実行され、仮想 DOM もコンパイラーもありません。

型で検査するルーティング: synstate-router

synstate-router は、遷移先・パスパラメータ・検索パラメータをすべて型検査し、状態を SynState の Observable で持ちます。React と synstate-dom 向けの連携があり、npm にはまだ公開していません。