Supabase uses Valtio for its state management

#opensource #statemanagement #supabase #valtio

As I was reading the Supabase source code for “fun”, I came across a package named Valtio.

I visited Valtio repository and found this in the description:

💊 Valtio makes proxy-state simple for React and Vanilla

In this article, we will look at:

Proxy object.
Valtio usage with an example.
An example use case found in Supabase source code.

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
},