Repository: pmndrs/valtio
Pull request #101 (2021-03-07 07:55:24)

[BREAKING] rename to useSnapshot
following up: https://github.com/pmndrs/valtio/pull/100#issuecomment-792231836

- old `useProxy` -> new `useSnapshot`
- old `useBoundProxy` -> new `useProxy` (only in `valtio/macro`)

This deprecates useProxy and useLocalProxy.

Well, it's not really "breaking", as old useProxy is still exported as deprecated.

codesandbox[bot]: This pull request is automatically built and testable in [CodeSandbox](https://codesandbox.io).

  To see build info of the built libraries, click [here](https://ci.codesandbox.io/status/pmndrs/valtio/pr/101/builds/107509) or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9054331383717b587e61d4c62cb66f9a21cc0bf3:

|Sandbox| Source |
|--|--|
|[React](https://codesandbox.io/s/react-8jjl8)| Configuration |
|[React Typescript](https://codesandbox.io/s/react-typescript-z72yu)| Configuration |

dai-shi: Let me release this to get more feedback. will see...

Patch:
diff --git a/.size-snapshot.json b/.size-snapshot.json
index 27b8827..9767fc5 100644
--- a/.size-snapshot.json
+++ b/.size-snapshot.json
@@ -1,8 +1,8 @@
 {
   "index.js": {
-    "bundled": 11521,
-    "minified": 5258,
-    "gzipped": 1882
+    "bundled": 11767,
+    "minified": 5392,
+    "gzipped": 1935
   },
   "vanilla.js": {
     "bundled": 6394,
@@ -10,14 +10,14 @@
     "gzipped": 1174
   },
   "utils.js": {
-    "bundled": 6056,
+    "bundled": 6071,
     "minified": 1997,
     "gzipped": 955
   },
   "index.module.js": {
-    "bundled": 10590,
-    "minified": 4726,
-    "gzipped": 1788,
+    "bundled": 10799,
+    "minified": 4827,
+    "gzipped": 1836,
     "treeshaked": {
       "rollup": {
         "code": 137,
@@ -43,7 +43,7 @@
     }
   },
   "utils.module.js": {
-    "bundled": 5687,
+    "bundled": 5702,
     "minified": 1740,
     "gzipped": 912,
     "treeshaked": {
@@ -57,21 +57,21 @@
     }
   },
   "macro.js": {
-    "bundled": 1520,
-    "minified": 937,
-    "gzipped": 508
+    "bundled": 1515,
+    "minified": 935,
+    "gzipped": 510
   },
   "macro.module.js": {
-    "bundled": 1366,
-    "minified": 851,
-    "gzipped": 467,
+    "bundled": 1361,
+    "minified": 849,
+    "gzipped": 469,
     "treeshaked": {
       "rollup": {
-        "code": 744,
+        "code": 742,
         "import_statements": 251
       },
       "webpack": {
-        "code": 1805
+        "code": 1803
       }
     }
   }
diff --git a/readme.md b/readme.md
index 4c859a6..8fc4c36 100644
--- a/readme.md
+++ b/readme.md
@@ -15,7 +15,7 @@
 Valtio turns the object you pass it into a self-aware proxy.
 
 ```jsx
-import { proxy, useProxy } from 'valtio'
+import { proxy, useSnapshot } from 'valtio'
 
 const state = proxy({ count: 0, text: 'hello' })
 ```
@@ -30,16 +30,16 @@ setInterval(() => {
 }, 1000)
 ```
 
-#### React via useProxy
+#### React via useSnapshot
 
 Create a local snapshot that catches changes. Rule of thumb: read from snapshots, mutate the source. The component will only re-render when the parts of the state you access have changed, it is render-optimized.
 
 ```jsx
 function Counter() {
-  const snapshot = useProxy(state)
+  const snap = useSnapshot(state)
   return (
     <div>
-      {snapshot.count}
+      {snap.count}
       <button onClick={() => ++state.count}>+1</button>
     </div>
   )
@@ -82,8 +82,8 @@ Valtio supports React-suspense and will throw promises that you access within a
 const state = proxy({ post: fetch(url).then((res) => res.json()) })
 
 function Post() {
-  const snapshot = useProxy(state)
-  return <div>{snapshot.post.title}</div>
+  const snap = useSnapshot(state)
+  return <div>{snap.post.title}</div>
 }
 
 function App() {
@@ -127,8 +127,8 @@ By default, state mutations are batched before triggering re-render. Sometimes,
 
 ```jsx
 function TextBox() {
-  const snapshot = useProxy(state, { sync: true })
-  return <input value={snapshot.text} onChange={(e) => (state.text = e.target.value)} />
+  const snap = useSnapshot(state, { sync: true })
+  return <input value={snap.text} onChange={(e) => (state.text = e.target.value)} />
 }
 ```
 
@@ -158,18 +158,6 @@ subscribe(state, () => {
 })
 ```
 
-#### Use it locally in components
-
-You can use it locally in components.
-[Notes](./src/utils.ts#L7-L17)
-
-```jsx
-import { useLocalProxy } from 'valtio/utils'
-
-function Foo() {
-  const [snapshot, state] = useLocalProxy({ count: 0, text: 'hello' })
-```
-
 #### Proxy with computed
 
 You can have computed values with dependency tracking. This is for experts.
diff --git a/src/index.ts b/src/index.ts
index 4bc6298..143f7b2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -56,7 +56,7 @@ type Options = {
   sync?: boolean
 }
 
-const useProxy = <T extends object>(
+const useSnapshot = <T extends object>(
   proxyObject: T,
   options?: Options
 ): NonPromise<T> => {
@@ -127,4 +127,15 @@ const useProxy = <T extends object>(
   return createDeepProxy(currSnapshot, affected, proxyCache)
 }
 
-export { proxy, subscribe, snapshot, ref, useProxy }
+export { proxy, subscribe, snapshot, ref, useSnapshot }
+
+/**
+ * @deprecated Renamed to useSnapshot
+ */
+export const useProxy = <T extends object>(
+  proxyObject: T,
+  options?: Options
+): NonPromise<T> => {
+  console.warn('DEPRECATED: Renamed to useSnapshot')
+  return useSnapshot(proxyObject, options)
+}
diff --git a/src/macro.ts b/src/macro.ts
index 3d88ed7..b5a5bd5 100644
--- a/src/macro.ts
+++ b/src/macro.ts
@@ -5,8 +5,8 @@ import { createMacro, MacroError } from 'babel-plugin-macros'
 import { addNamed } from '@babel/helper-module-imports'
 
 const macro = ({ references }: any) => {
-  references.useBoundProxy?.forEach((path: NodePath) => {
-    const hook = addNamed(path, 'useProxy', 'valtio')
+  references.useProxy?.forEach((path: NodePath) => {
+    const hook = addNamed(path, 'useSnapshot', 'valtio')
     const proxy = (path.parentPath.get('arguments.0') as any).node
     if (!t.isIdentifier(proxy)) throw new MacroError('no proxy object')
     const snap = t.identifier(`valtio_macro_snap_${proxy.name}`)
@@ -34,6 +34,6 @@ const macro = ({ references }: any) => {
   })
 }
 
-export declare function useBoundProxy<T extends object>(proxyObject: T): void
+export declare function useProxy<T extends object>(proxyObject: T): void
 
 export default createMacro(macro, { configName: 'valtio' })
diff --git a/src/utils.ts b/src/utils.ts
index dfc39d7..f52c107 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -4,7 +4,7 @@ import { createDeepProxy, isDeepChanged } from 'proxy-compare'
 import type { NonPromise } from './vanilla'
 
 /**
- * useLocalProxy
+ * @deprecated useLocalProxy
  *
  * This is to create a proxy in a component at mount.
  * and discard it when the component unmounts.
@@ -126,7 +126,7 @@ export const devtools = <T extends object>(proxyObject: T, name?: string) => {
  *
  * [Notes]
  * This is for expert users and not recommended for ordinary users.
- * Contradictory to its name, this is costly and overlaps with useProxy.
+ * Contradictory to its name, this is costly and overlaps with useSnapshot.
  * Do not try to optimize too early. It can worsen the performance.
  * Measurement and comparison will be very important.
  *


Test patch:
diff --git a/tests/__snapshots__/macro.test.ts.snap b/tests/__snapshots__/macro.test.ts.snap
index a692054..add9513 100644
--- a/tests/__snapshots__/macro.test.ts.snap
+++ b/tests/__snapshots__/macro.test.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`valtio/macro 1. valtio/macro: 1. valtio/macro 1`] = `
 
-import { useBoundProxy } from '../dist/macro'
+import { useProxy } from '../dist/macro'
 
 const Component = () => {
-  useBoundProxy(state)
+  useProxy(state)
   return (
     <div>
       {state.count}
@@ -16,10 +16,10 @@ const Component = () => {
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { useProxy as _useProxy } from 'valtio'
+import { useSnapshot as _useSnapshot } from 'valtio'
 
 const Component = () => {
-  const valtio_macro_snap_state = _useProxy(state)
+  const valtio_macro_snap_state = _useSnapshot(state)
 
   return (
     <div>
diff --git a/tests/async.test.tsx b/tests/async.test.tsx
index abc913b..a587836 100644
--- a/tests/async.test.tsx
+++ b/tests/async.test.tsx
@@ -1,6 +1,6 @@
 import React, { StrictMode, Suspense } from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import { proxy, useProxy } from '../src/index'
+import { proxy, useSnapshot } from '../src/index'
 
 const sleep = (ms: number) =>
   new Promise((resolve) => {
@@ -15,10 +15,10 @@ it('delayed increment', async () => {
   }
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(state)
+    const snap = useSnapshot(state)
     return (
       <>
-        <div>count: {snapshot.count}</div>
+        <div>count: {snap.count}</div>
         <button onClick={delayedIncrement}>button</button>
       </>
     )
@@ -46,10 +46,10 @@ it('delayed object', async () => {
   }
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(state)
+    const snap = useSnapshot(state)
     return (
       <>
-        <div>text: {snapshot.object.text}</div>
+        <div>text: {snap.object.text}</div>
         <button onClick={delayedObject}>button</button>
       </>
     )
@@ -77,10 +77,10 @@ it('delayed falsy value', async () => {
   }
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(state)
+    const snap = useSnapshot(state)
     return (
       <>
-        <div>value: {String(snapshot.value)}</div>
+        <div>value: {String(snap.value)}</div>
         <button onClick={delayedValue}>button</button>
       </>
     )
diff --git a/tests/basic.test.tsx b/tests/basic.test.tsx
index 0918bc0..9de93a1 100644
--- a/tests/basic.test.tsx
+++ b/tests/basic.test.tsx
@@ -1,15 +1,15 @@
 import React, { StrictMode, useRef, useEffect, useState } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
-import { proxy, useProxy } from '../src/index'
+import { proxy, useSnapshot } from '../src/index'
 
 it('simple counter', async () => {
   const obj = proxy({ count: 0 })
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     return (
       <>
-        <div>count: {snapshot.count}</div>
+        <div>count: {snap.count}</div>
         <button onClick={() => ++obj.count}>button</button>
       </>
     )
@@ -31,7 +31,7 @@ it('no extra re-renders (commits)', async () => {
   const obj = proxy({ count: 0, count2: 0 })
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(1)
     useEffect(() => {
       commitsRef.current += 1
@@ -39,7 +39,7 @@ it('no extra re-renders (commits)', async () => {
     return (
       <>
         <div>
-          count: {snapshot.count} ({commitsRef.current})
+          count: {snap.count} ({commitsRef.current})
         </div>
         <button onClick={() => ++obj.count}>button</button>
       </>
@@ -47,7 +47,7 @@ it('no extra re-renders (commits)', async () => {
   }
 
   const Counter2: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(1)
     useEffect(() => {
       commitsRef.current += 1
@@ -55,7 +55,7 @@ it('no extra re-renders (commits)', async () => {
     return (
       <>
         <div>
-          count2: {snapshot.count2} ({commitsRef.current})
+          count2: {snap.count2} ({commitsRef.current})
         </div>
         <button onClick={() => ++obj.count2}>button2</button>
       </>
@@ -92,11 +92,11 @@ it('no extra re-renders (render func calls in non strict mode)', async () => {
 
   const renderFn = jest.fn()
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
-    renderFn(snapshot.count)
+    const snap = useSnapshot(obj)
+    renderFn(snap.count)
     return (
       <>
-        <div>count: {snapshot.count}</div>
+        <div>count: {snap.count}</div>
         <button onClick={() => ++obj.count}>button</button>
       </>
     )
@@ -104,11 +104,11 @@ it('no extra re-renders (render func calls in non strict mode)', async () => {
 
   const renderFn2 = jest.fn()
   const Counter2: React.FC = () => {
-    const snapshot = useProxy(obj)
-    renderFn2(snapshot.count2)
+    const snap = useSnapshot(obj)
+    renderFn2(snap.count2)
     return (
       <>
-        <div>count2: {snapshot.count2}</div>
+        <div>count2: {snap.count2}</div>
         <button onClick={() => ++obj.count2}>button2</button>
       </>
     )
@@ -175,10 +175,10 @@ it('object in object', async () => {
   const obj = proxy({ object: { count: 0 } })
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     return (
       <>
-        <div>count: {snapshot.object.count}</div>
+        <div>count: {snap.object.count}</div>
         <button onClick={() => ++obj.object.count}>button</button>
       </>
     )
@@ -200,10 +200,10 @@ it('array in object', async () => {
   const obj = proxy({ counts: [0, 1, 2] })
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     return (
       <>
-        <div>counts: {snapshot.counts.join(',')}</div>
+        <div>counts: {snap.counts.join(',')}</div>
         <button onClick={() => obj.counts.push(obj.counts.length)}>
           button
         </button>
@@ -227,11 +227,11 @@ it('array length after direct assignment', async () => {
   const obj = proxy({ counts: [0, 1, 2] })
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     return (
       <>
-        <div>counts: {snapshot.counts.join(',')}</div>
-        <div>length: {snapshot.counts.length}</div>
+        <div>counts: {snap.counts.join(',')}</div>
+        <div>length: {snap.counts.length}</div>
         <button
           onClick={() => (obj.counts[obj.counts.length] = obj.counts.length)}>
           increment
@@ -265,10 +265,10 @@ it('deleting property', async () => {
   const obj = proxy<{ count?: number }>({ count: 1 })
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     return (
       <>
-        <div>count: {snapshot.count ?? 'none'}</div>
+        <div>count: {snap.count ?? 'none'}</div>
         <button onClick={() => delete obj.count}>button</button>
       </>
     )
@@ -292,10 +292,10 @@ it('circular object', async () => {
   obj.object.count = 0
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj) as any
+    const snap = useSnapshot(obj) as any
     return (
       <>
-        <div>count: {snapshot.count}</div>
+        <div>count: {snap.count}</div>
         <button onClick={() => ++obj.count}>button</button>
       </>
     )
@@ -318,13 +318,13 @@ it('render from outside', async () => {
 
   const Counter: React.FC = () => {
     const [show, setShow] = useState(false)
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     return (
       <>
         {show ? (
-          <div>count: {snapshot.count}</div>
+          <div>count: {snap.count}</div>
         ) : (
-          <div>anotherCount: {snapshot.anotherCount}</div>
+          <div>anotherCount: {snap.anotherCount}</div>
         )}
         <button onClick={() => ++obj.count}>button</button>
         <button onClick={() => setShow((x) => !x)}>toggle</button>
diff --git a/tests/class.test.tsx b/tests/class.test.tsx
index 80401e7..28ba29d 100644
--- a/tests/class.test.tsx
+++ b/tests/class.test.tsx
@@ -1,6 +1,6 @@
 import React, { StrictMode, useRef, useEffect } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
-import { proxy, useProxy } from '../src/index'
+import { proxy, useSnapshot } from '../src/index'
 
 it('simple class without methods', async () => {
   class CountClass {
@@ -13,10 +13,10 @@ it('simple class without methods', async () => {
   const obj = proxy(new CountClass())
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     return (
       <>
-        <div>count: {snapshot.count}</div>
+        <div>count: {snap.count}</div>
         <button onClick={() => ++obj.count}>button</button>
       </>
     )
@@ -47,7 +47,7 @@ it('no extra re-renders with class', async () => {
   const obj = proxy(new CountClass())
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
       commitsRef.current += 1
@@ -55,7 +55,7 @@ it('no extra re-renders with class', async () => {
     return (
       <>
         <div>
-          count: {snapshot.count} ({commitsRef.current})
+          count: {snap.count} ({commitsRef.current})
         </div>
         <button onClick={() => ++obj.count}>button</button>
       </>
@@ -63,7 +63,7 @@ it('no extra re-renders with class', async () => {
   }
 
   const Counter2: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
       commitsRef.current += 1
@@ -71,7 +71,7 @@ it('no extra re-renders with class', async () => {
     return (
       <>
         <div>
-          count2: {snapshot.count2} ({commitsRef.current})
+          count2: {snap.count2} ({commitsRef.current})
         </div>
         <button onClick={() => ++obj.count2}>button2</button>
       </>
@@ -121,10 +121,10 @@ it('inherited class without methods', async () => {
   const obj = proxy(new CountClass())
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     return (
       <>
-        <div>count: {snapshot.count}</div>
+        <div>count: {snap.count}</div>
         <button onClick={() => ++obj.count}>button</button>
       </>
     )
@@ -156,7 +156,7 @@ it('class with a method', async () => {
   const obj = proxy(new CountClass())
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
       commitsRef.current += 1
@@ -164,7 +164,7 @@ it('class with a method', async () => {
     return (
       <>
         <div>
-          doubled: {snapshot.doubled()} ({commitsRef.current})
+          doubled: {snap.doubled()} ({commitsRef.current})
         </div>
         <button onClick={() => ++obj.count}>button</button>
       </>
@@ -172,14 +172,14 @@ it('class with a method', async () => {
   }
 
   const Counter2: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
       commitsRef.current += 1
     })
     return (
       <div>
-        count: {snapshot.count} ({commitsRef.current})
+        count: {snap.count} ({commitsRef.current})
       </div>
     )
   }
@@ -224,7 +224,7 @@ it('inherited class with a method', async () => {
   const obj = proxy(new CountClass())
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
       commitsRef.current += 1
@@ -232,7 +232,7 @@ it('inherited class with a method', async () => {
     return (
       <>
         <div>
-          doubled: {snapshot.doubled()} ({commitsRef.current})
+          doubled: {snap.doubled()} ({commitsRef.current})
         </div>
         <button onClick={() => ++obj.count}>button</button>
       </>
@@ -240,7 +240,7 @@ it('inherited class with a method', async () => {
   }
 
   const Counter2: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
       commitsRef.current += 1
@@ -248,7 +248,7 @@ it('inherited class with a method', async () => {
     return (
       <>
         <div>
-          count2: {snapshot.count2} ({commitsRef.current})
+          count2: {snap.count2} ({commitsRef.current})
         </div>
         <button onClick={() => ++obj.count2}>button2</button>
       </>
@@ -299,7 +299,7 @@ it('no extra re-renders with getters', async () => {
   const obj = proxy(new CountClass())
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
       commitsRef.current += 1
@@ -307,7 +307,7 @@ it('no extra re-renders with getters', async () => {
     return (
       <>
         <div>
-          count: {snapshot.count1} ({commitsRef.current})
+          count: {snap.count1} ({commitsRef.current})
         </div>
         <button onClick={() => ++obj.count}>button</button>
       </>
@@ -315,7 +315,7 @@ it('no extra re-renders with getters', async () => {
   }
 
   const Counter2: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
       commitsRef.current += 1
@@ -323,7 +323,7 @@ it('no extra re-renders with getters', async () => {
     return (
       <>
         <div>
-          sum: {snapshot.sum} ({commitsRef.current})
+          sum: {snap.sum} ({commitsRef.current})
         </div>
         <button onClick={() => ++obj.count2}>button2</button>
       </>
diff --git a/tests/computed.test.tsx b/tests/computed.test.tsx
index ed4bfd7..70b78e5 100644
--- a/tests/computed.test.tsx
+++ b/tests/computed.test.tsx
@@ -1,6 +1,6 @@
 import React, { StrictMode, Suspense } from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import { useProxy, snapshot } from '../src/index'
+import { useSnapshot, snapshot } from '../src/index'
 import { proxyWithComputed } from '../src/utils'
 
 const sleep = (ms: number) =>
@@ -48,7 +48,7 @@ it('async compute getters', async () => {
   )
 
   const Counter: React.FC = () => {
-    const snap = useProxy(state)
+    const snap = useSnapshot(state)
     return (
       <>
         <div>
diff --git a/tests/getter.test.tsx b/tests/getter.test.tsx
index d7679fa..2d7a77e 100644
--- a/tests/getter.test.tsx
+++ b/tests/getter.test.tsx
@@ -1,6 +1,6 @@
 import React, { StrictMode } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
-import { proxy, useProxy } from '../src/index'
+import { proxy, useSnapshot } from '../src/index'
 
 it('simple object getters', async () => {
   const computeDouble = jest.fn((x) => x * 2)
@@ -12,11 +12,11 @@ it('simple object getters', async () => {
   })
 
   const Counter: React.FC<{ name: string }> = ({ name }) => {
-    const snapshot = useProxy(state)
+    const snap = useSnapshot(state)
     return (
       <>
         <div>
-          {name} count: {snapshot.doubled}
+          {name} count: {snap.doubled}
         </div>
         <button onClick={() => ++state.count}>{name} button</button>
       </>
@@ -54,11 +54,11 @@ it('object getters returning object', async () => {
   })
 
   const Counter: React.FC<{ name: string }> = ({ name }) => {
-    const snapshot = useProxy(state)
+    const snap = useSnapshot(state)
     return (
       <>
         <div>
-          {name} count: {snapshot.doubled.value}
+          {name} count: {snap.doubled.value}
         </div>
         <button onClick={() => ++state.count}>{name} button</button>
       </>
diff --git a/tests/macro.test.ts b/tests/macro.test.ts
index abed9fa..b00eb8f 100644
--- a/tests/macro.test.ts
+++ b/tests/macro.test.ts
@@ -11,10 +11,10 @@ pluginTester({
   },
   tests: [
     `
-import { useBoundProxy } from '../dist/macro'
+import { useProxy } from '../dist/macro'
 
 const Component = () => {
-  useBoundProxy(state)
+  useProxy(state)
   return (
     <div>
       {state.count}
diff --git a/tests/mapset.test.tsx b/tests/mapset.test.tsx
index 43441cf..581d8ab 100644
--- a/tests/mapset.test.tsx
+++ b/tests/mapset.test.tsx
@@ -1,15 +1,15 @@
 import React, { StrictMode } from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import { proxy, useProxy } from '../src/index'
+import { proxy, useSnapshot } from '../src/index'
 
 it('unsupported map', async () => {
   const obj = proxy({ map: new Map([['count', 0]]) })
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj) as any
+    const snap = useSnapshot(obj) as any
     return (
       <>
-        <div>count: {snapshot.map.get('count')}</div>
+        <div>count: {snap.map.get('count')}</div>
         <button onClick={() => obj.map.set('count', 1)}>button</button>
       </>
     )
@@ -32,10 +32,10 @@ it('unsupported set', async () => {
   const obj = proxy({ set: new Set([1, 2, 3]) })
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj) as any
+    const snap = useSnapshot(obj) as any
     return (
       <>
-        <div>count: {[...snapshot.set].join(',')}</div>
+        <div>count: {[...snap.set].join(',')}</div>
         <button onClick={() => obj.set.add(4)}>button</button>
       </>
     )
diff --git a/tests/ref.test.tsx b/tests/ref.test.tsx
index 25a962b..62727b9 100644
--- a/tests/ref.test.tsx
+++ b/tests/ref.test.tsx
@@ -1,12 +1,12 @@
 import React, { StrictMode, useRef, useEffect } from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import { proxy, ref, useProxy } from '../src/index'
+import { proxy, ref, useSnapshot } from '../src/index'
 
 it('should trigger re-render setting objects with ref wrapper', async () => {
   const obj = proxy({ nested: ref({ count: 0 }) })
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     const commitsRef = useRef(1)
     useEffect(() => {
       commitsRef.current += 1
@@ -14,7 +14,7 @@ it('should trigger re-render setting objects with ref wrapper', async () => {
     return (
       <>
         <div>
-          count: {snapshot.nested.count} ({commitsRef.current})
+          count: {snap.nested.count} ({commitsRef.current})
         </div>
         <button onClick={() => (obj.nested = ref({ count: 0 }))}>button</button>
       </>
@@ -38,10 +38,10 @@ it('should not track object wrapped in ref assigned to proxy state', async () =>
   const obj = proxy<{ ui: JSX.Element | null }>({ ui: null })
 
   const Component: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     return (
       <>
-        {snapshot.ui || <span>original</span>}
+        {snap.ui || <span>original</span>}
         <button onClick={() => (obj.ui = ref(<span>replace</span>))}>
           button
         </button>
@@ -66,10 +66,10 @@ it('should not trigger re-render when mutating object wrapped in ref', async ()
   const obj = proxy({ nested: ref({ count: 0 }) })
 
   const Counter: React.FC = () => {
-    const snapshot = useProxy(obj)
+    const snap = useSnapshot(obj)
     return (
       <>
-        <div>count: {snapshot.nested.count}</div>
+        <div>count: {snap.nested.count}</div>
         <button onClick={() => ++obj.nested.count}>button</button>
       </>
     )