🧙

祝！Valtio v2リリース

2024/08/29に公開4件

JavaScript

本当はReact 19と同時にリリースするつもりだったのですが、もう待ちきれないので、リリースしちゃいました。Valtio v2でpromiseを使う場合はReact 19の use を使う必要があるのですが、React 18向けの react18-use を作ったので、当面はそれで凌いでいただこうと思います。

Discussion

Lotus

Valtio v2のリリースおめでとうございます🥳
早速 v1 から v2 への移行を考えているのですが How to Migrate to v2 from v1 に

const state = proxy(deepClone({ count: 1, obj: { text: 'hi' } }))
state.obj = deepClone({ text: 'hello' })

の様な deepClone に関するサンプルコードがありますが、このコードでは proxy(obj) の obj は再利用されていないため

const state = proxy({ count: 1, obj: { text: 'hi' } })
state.obj = { text: 'hello' }

と記載しても大丈夫なケースで deepClone が必要となるケースは、下記の様に元となるオブジェクト自体を利用していく場合、という認識なのですが合っていますでしょうか？

const source = { count: 1, obj: { text: 'hi' } }
const state = proxy(deepClone(source))
const child = { text: 'hello' }
state.obj = deepClone(child)
source.count = 2
child.text = 'world'
//console.log(source.count)
//state.obj = deepClone(child)

daishi

ありがとうございます。はい、合ってます。混乱の元でしたね。
GitHubの方でも指摘されて、 https://github.com/pmndrs/valtio/pull/939 で直そうとしてますので、確認していただけると幸いです。

Lotus

ご回答ありがとうございます🙇
v1 の時に state の値リセットの為に、下記 defaultState 相当の元となるオブジェクトに初期値を残しておく使い方をしていたので、v2 移行後は deepClone が必要そうですね。

// v1
const defaultState = { count:0, name: 'anonymous' }
const state = proxy(defaultState)

// リセットが必要なタイミングで defaultState の値を利用
state.count = defaultState.count
state.name = defaultState.name

daishi

基本的にはそうなります。v1では暗黙的に内部でdeepClone相当のことをしていました。
厳密に言えば、上記の例はオブジェクト自体は再利用してないので、deepCloneしなくても動きます。ただ、将来の拡張を考えると、deepClone(defaultState)しておくほうが安全かもしれません。