This content originally appeared on DEV Community and was authored by Ramu Narasinga
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
},
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:
Website: https://ramunarasinga.com/
Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/
Github: https://github.com/Ramu-Narasinga
Email: ramu.narasinga@gmail.com
Learn the best practices used in open source.
References:
- https://github.com/search?q=repo%3Asupabase%2Fsupabase+valtio&type=code
- https://github.com/supabase/supabase/blob/00385657e8da32535916969036bb4e76befc5a44/apps/studio/state/app-state.ts#L6
- https://github.com/search?q=repo%3Asupabase/supabase%20appState&type=code
- https://github.com/supabase/supabase/blob/00385657e8da32535916969036bb4e76befc5a44/apps/studio/components/ui/AISettingsModal.tsx#L20
- https://github.com/pmndrs/valtio
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
This content originally appeared on DEV Community and was authored by Ramu Narasinga
Ramu Narasinga | Sciencx (2024-08-09T22:32:08+00:00) Supabase uses Valtio for its state management. Retrieved from https://www.scien.cx/2024/08/09/supabase-uses-valtio-for-its-state-management/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.