`useProxy`マクロ

v0.7.1まではuseProxyは本体から提供されていましたが、v0.8.0からはuseSnapshotに改名しました。中身は変わっていません。

代わりにuseProxyはマクロとして提供されるようになりました。babel-plugin-macrosを使っているのですが、Create React Appを使っている場合はすでに組み込まれています。

このuseProxyマクロを使うと、

import { useProxy } from 'valtio/macro'

const Component = () => {
  useProxy(state)
  return (
    <div>
      {state.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  )
}

と言うコードが、次のように変換されます。

import { useSnapshot } from 'valtio'

const Component = () => {
  const snap = useSnapshot(state)
  return (
    <div>
      {snap.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  )
}

useProxyマクロを使うと、snapshotをほとんど意識せずにコーディングすることができます。snapshotの概念がなくなるわけではありませんが、snapshotの扱いは癖があるので、マクロが使えるケースでは役立つでしょう。ちなみに、eslint-plugin-valtioもあります。

おわりに

valtioのv1リリースが完了したので、次はjotai。こっちは大物。
https://github.com/pmndrs/jotai/issues/333

React開発者向けオンラインサロン「React Fan」の紹介

最後に、私が主催している「React Fan」というコミュニティをお知らせします。テキストチャットでコミュニケーションできるSlackのワークスペースを用意しています。Slackへの参加は無料ですので、ご興味がある方はぜひご参加ください。詳しくは、下記のページをご参照ください。

React開発者向けオンラインサロン「React Fan」の入り口ページ

Slackへの招待リンクも上記ページにあります。