Proxy object

Wait, what’s a Proxy? The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object. (From the MDN docs). Valtio internally uses Proxy mechanism.

The below example is picked from MDN docs:


// Example 1:
const target = {
  message1: "hello",
  message2: "everyone",
};
 
const handler1 = {};
 
const proxy1 = new Proxy(target, handler1);
 
console.log(proxy1.message1); // hello
console.log(proxy1.message2); // everyone
 
// Example 2:
const target = {
  message1: "hello",
  message2: "everyone",
};
 
const handler2 = {
  get(target, prop, receiver) {
    return "world";
  },
};
 
const proxy2 = new Proxy(target, handler2);
 
console.log(proxy2.message1); // world
console.log(proxy2.message2); // world

Valtio usage with an example.

The following demonstration is picked from the docs.

Install


npm i valtio

Wrap your state object

Valtio turns the object you pass it into a self-aware proxy.


import { proxy, useSnapshot } from 'valtio'
const state = proxy({ count: 0, text: 'hello' })

Mutate from anywhere

You can make changes to it in the same way you would to a normal js-object.


setInterval(() => {
  ++state.count
}, 1000)

React via useSnapshot

Create a local snapshot that catches changes. Rule of thumb: read from snapshots in render function, otherwise use the source. The component will only re-render when the parts of the state you access have changed, it is render-optimized.


// This will re-render on `state.count` change but not on `state.text` change
function Counter() {
  const snap = useSnapshot(state)
  return (
    <div>
      {snap.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  )
}

An example use case found in Supabase source code

I searched long and hard to find a simple, easy to understand example use case in Supabase source code.

The example I picked is from /apps/studio/state/app-state.ts

app-state.ts has about 95 lines of code at the time of writing this article.


// pulled from https://github.com/supabase/supabase/blob/00385657e8da32535916969036bb4e76befc5a44/apps/studio/state/app-state.ts#L57-L60
showAiSettingsModal: false,
setShowAiSettingsModal: (value: boolean) => {
  appState.showAiSettingsModal = value
},

showAiSettingsModal is found to be used in /apps/studio/components/ui/AISettingsModal.tsx

Get free courses inspired by the best practices used in open source.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects