<pre class="shiki github-dark shaku"><code>import React, { useState, useEffect, useCallback } from 'react'// Cache proxy value with a storeconst cache = new WeakMap&lt;object, object&gt;()export function proxy&lt;T extends object&gt;(initialValue: T): T { const rerender = new CustomEvent('rerender') const keys: Set&lt;string | symbol&gt; = new Set() // Attempt to get a store from the cache if (cache.has(initialValue)) { return cache.get(initialValue) as T } // Configure a store const store: T = new Proxy({ ...initialValue }, { get: (target, key) =&gt; { keys.add(key) return Reflect.get(target, key) }, set: (target, key, value) =&gt; { const status = Reflect.set(target, key, value) // Trigger re-render if the key is used by a component if (status &amp;&amp; keys.has(key)) { dispatchEvent(rerender) // Remove to get it again after re-render keys.delete(key) } return status } }) // Cache the store for future usage cache.set(initialValue, store) return store}export function useSnapshot&lt;T extends object&gt;(proxy: T): T { const [, setDummy] = useState&lt;boolean&gt;(false) // Stupid-ass way to re-render the component const update = useCallback(() =&gt; { setDummy(prev =&gt; !prev) }, [setDummy]) // Linsten for rerender event to rerender the component useEffect(() =&gt; { window.addEventListener('rerender', update) return () =&gt; { window.removeEventListener('rerender', update) } }, []) return proxy}</code></pre>

Using Proxy and CustomEvent

valtio claims to make proxy-state simple. Let's take a look at the basic example. import { proxy, useSnapshot } from 'valtio'const state = proxy({ cou…