【Valtio】Proxyベースの状態管理ライブラリValtio

valtioについて調べた

github.com

valtioは日本人の@daishiさんが作成したProxyベースのシンプルかつリアクティブな状態管理ライブラリ

proxyを用いてJavaScriptオブジェクトをラップし、状態の変更を自動的に追跡・通知する仕組みを提供している

生まれた背景は以下に書かれていた

zenn.dev

Mobxとの違いとして、Valtio はプロキシストアとのやり取りに HOC ではなくフックを使用するのでReactの思想に近い

特徴

1. シンプルなAPI
   • proxyとuseSnapshotという基本的な2つのコンセプトで動作複雑なactionやreducerを定義する必要がなく、直感的に状態を管理できる
2. リアクティブな状態管理
   • 状態が変更されると、自動的にその変更を追跡して再レンダリングをトリガーする
   • 特定の部分だけをレンダリングするので効率的
3. TypeScriptサポート
   • 型安全性を保ちながら状態を管理できるため、開発体験が向上する
4. 軽量
   • 依存関係が少なく、パフォーマンスに優れた設計である

基本的な使い方

1. 状態の定義

proxyを使って状態を定義する

import { proxy } from 'valtio';

const state = proxy({
  count: 0,
  text: 'hello'
});

2. 状態の使用（React）

useSnapshotを使ってReactコンポーネント内で状態を使う

import { useSnapshot } from 'valtio';

function Counter() {
  const snap = useSnapshot(state);
  return (
    <div>
      <p>Count: {snap.count}</p>
      <button onClick={() => state.count++}>Increment</button>
    </div>
  );
}

3. 状態の購読

コンポーネント外部の状態にアクセスし、変更をサブスクライブできる

import { subscribe } from 'valtio'

// Subscribe to all state changes
const unsubscribe = subscribe(state, () =>
  console.log('state has changed to', state),
)
// Unsubscribe by calling the result
unsubscribe()

Mobx同様にProxyベースの状態管理の是非がありそうだが、コード量を減らしつつ簡単に強力なリアクティブな状態管理を実現できるので良さそう

React 19のuseフックとも互換性があるようなので、最新のReactで動かないという心配もなさそう

もう少し実践的な使い方は後日調べる