Valtio/V2/Use Snapshot Migration

Last update

Aug 30, 2024

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.

Example

Before

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

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)) }</>;
};

You can find the implemetation of this codemod in the studio here.

Example

Before

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

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)) }</>;
};

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now