🐻
Zustand-Valtioという選択肢はありか
というツイートをしたら、
why not combining both?
と言われたので、面白半分で、
というのを作ってみたら、
LGTM! Let's ship it!
と言われまして、そんな利用シーンはないだろう思いましたが、ふと待てよ、と。
Zustandはimmerと使われることもあるので、immerの代わりにValtioを使うのはありなんじゃないかと思い、半分本気で、zustand-valtioというライブラリを作りました。
使い方は、createWithProxyに初期オブジェクトを渡すと、ZustandのhookとValtioのproxyが返ってくるので、前者をコンポーネントの読み込み用に、後者を書き込み用に使うことができます。
import { createWithProxy } from 'zustand-valtio';
const [useCounterState, counterState] = createWithProxy({ count: 0 });
const Counter = () => {
const count = useCounterState((state) => state.count);
const inc = () => ++counterState.count;
return (
<div>
{count} <button onClick={inc}>+1</button>
</div>
);
};
既に、Valtioを使っている人からはなぜこんなことをするのか分からないと思いますが、Zustandユーザには新しく見えるかもしれません。Valtio使っていてる人でも、selectorでレンダリング最適化したいと思っている人には合うかもしれません。
いかがでしょうか。
Discussion