Zustand-Valtioという選択肢はありか

https://twitter.com/dai_shi/status/1771499148996390940

というツイートをしたら、

why not combining both?

と言われたので、面白半分で、

https://twitter.com/dai_shi/status/1771867321310580883

というのを作ってみたら、

LGTM! Let's ship it!

と言われまして、そんな利用シーンはないだろう思いましたが、ふと待てよ、と。

Zustandはimmerと使われることもあるので、immerの代わりにValtioを使うのはありなんじゃないかと思い、半分本気で、zustand-valtioというライブラリを作りました。

https://github.com/zustandjs/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でレンダリング最適化したいと思っている人には合うかもしれません。

いかがでしょうか。