Assess, plan, evolve.

This recipe provides a collection of codemods to help you migrate your codebase to [Valtio v2](https://github.com/pmndrs/valtio/blob/main/docs/guides/migrating-to-v2.mdx). These codemods are designed to streamline the transition process by automating common code transformations due to behavioral changes in Valtio v2. ## Codemods Included The following codemods are included in this recipe: 1. **Proxy Function Behavior Update** Updates instances of `proxy(obj)` to use `deepClone` to ensure objects are deeply copied as in Valtio v1. This adjustment is necessary due to the change from a pure function in v1 to an impure function in v2 that modifies the original object. 2. **`useSnapshot` Behavior Adaptation** Modifies the usage of `useSnapshot()` to be compatible with recent changes for better optimization with `useMemo` and the upcoming React compiler. This includes wrapping snapshot data with `use()` to ensure compatibility and performance.

This codemod automates the migration of Valtio code to accommodate changes in the behavior of `useSnapshot()`. In recent updates, `useSnapshot()` has been modified for better compatibility with `useMemo` and the upcoming React compiler. This codemod updates your code to ensure optimal performance and compatibility with these changes. You can find the implemetation of this codemod in the studio [here](https://go.codemod.com/XQeYWiX). ## Example ### Before ```ts import { proxy, useSnapshot } from 'valtio'; const state = proxy({ data: fetch(api).then((res) => res.json()) }); const Component = () => { const snap = useSnapshot(state); return <>{ JSON.stringify(snap.data) }</>; }; ``` ### After ```ts import { use } from 'react'; import { proxy, useSnapshot } from 'valtio'; const state = proxy({ data: fetch(api).then((res) => res.json()) }); const Component = () => { const snap = useSnapshot(state); return <>{ JSON.stringify(use(snap.data)) }</>; }; ```

In Valtio v2, the behavior of the `proxy(obj)` function has changed. In v1, `proxy(obj)` was a pure function that deeply copied the object `obj`. In v2, `proxy(obj)` is an impure function that deeply modifies `obj`. This codemod updates your code to accommodate these changes by incorporating `deepClone` to ensure that objects are deeply copied as they were in v1. ## Example ### Before ```ts import { proxy } from 'valtio'; const state = proxy({ count: 1, obj: { text: 'hi' } }); state.obj = { text: 'hello' }; ``` ### After ```ts import { proxy } from 'valtio'; import { deepClone } from 'valtio/utils'; const state = proxy(deepClone({ count: 1, obj: { text: 'hi' } })); state.obj = deepClone({ text: 'hello' }); ```