<pre class="shiki github-dark shaku"><code>import React, { useState } from "react";export function proxy&lt;T extends object&gt;(initialValue: T): T { // your code here let forceUpdate: React.Dispatch&lt;React.SetStateAction&lt;number&gt;&gt;; const rendered = new Set&lt;keyof T&gt;(); return new Proxy&lt;T&gt;(initialValue, { get(target, prop) { // your code here rendered.add(prop as keyof T); return Reflect.get(target, prop); }, set(target, prop, value) { // your code here if (prop === "forceUpdate") { forceUpdate = value; return false; } if (Reflect.get(target, prop) === value) { return true; // no change do not update } const result = Reflect.set(target, prop, value); const isRendered = rendered.has(prop as keyof T); if (result &amp;&amp; isRendered &amp;&amp; forceUpdate) { rendered.clear(); // recalculate rendered forceUpdate((count: number) =&gt; count + 1); } return result; }, });}export function useSnapshot&lt;T extends object&gt;(proxy: T): T { // your code here const [_, forceUpdate] = useState(0); Reflect.set(proxy, "forceUpdate", forceUpdate); return proxy;}// to try your code on the right panel// export App() component like belowconst state = proxy({ count: 100, text: "BFE.dev", mode: "count" });let renderCount = 0;export function App() { const snap = useSnapshot(state); renderCount += 1; return &lt;div&gt;{snap.mode === "count" ? snap.count : snap.text}&lt;/div&gt;;}setTimeout(() =&gt; { state.text = "bigfrontend.dev"; console.log(renderCount); // 1}, 100);setTimeout(() =&gt; { state.count = 101; console.log(renderCount); // 2}, 200);setTimeout(() =&gt; { state.mode = "text"; console.log(renderCount); // 3}, 300);setTimeout(() =&gt; { state.count = 102; console.log(renderCount); // 3}, 400);setTimeout(() =&gt; { state.text = "BFE.dev"; console.log(renderCount); // 4}, 500);</code></pre>

Tip: setState can trigger forceUpdate

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…