JotaiとValtioの融合から生まれたmutableAtomという新機能

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

jotai-valtioに少し面白い機能が追加されました。これまでも、atomWithProxyというValtioのproxy stateをJotaiでも使えるようにする機能はあったのですが、今回追加されたmutableAtomというのはValtioとの橋渡しをするのではなく、内部的にValtioを使うものです。proxyを使って、mutableに扱えるatomを作ることができます。

使用例はこちら

import React from 'react'
import { useAtomValue } from 'jotai/react'
import { mutableAtom } from 'jotai-valtio'

const countProxyAtom = mutableAtom(0)

function Counter() {
  const countProxy = useAtomValue(countProxyAtom)
  return (
    <div>
      count: {countProxy.value}{' '}
      <button onClick={() => ++countProxy.value}>inc</button>
    </div>
  )
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Counter />
    </div>
  )
}

デモはこちら