Another React binding for Valtio proxy state
npm install valtio-signal
Another React binding for Valtio proxy state
To use Valtio proxy state, the official method is useSnapshot.
There's alternative library called use-valtio.
This library provides yet another method.
It follows jotai-signal,
which is inspired by @preact/signals-react.
It allows to use the proxy state in React without using hooks.
We don't need to follow the rules of hooks.
``jsx
/* @jsxImportSource valtio-signal /
import { proxy } from 'valtio/vanilla';
import { $ } from 'valtio-signal';
const state = proxy({ count: 0 });
setInterval(() => {
++state.count;
}, 100);
const Counter = () =>
How it works
The pragma at the first line does the trick.
It will transform the code with signal to the code that React can handle.
$3
jsx
/* @jsxImportSource valtio-signal /const Counter = () => (
Count: {$(state).count} ({Math.random()})
);
`$3
jsx
import { useEffect, useMemo, useReducer } from 'react';
import { snapshot, subscribe } from 'valtio';const Counter = () => {
const [, rerender] = useReducer((c) => c + 1, 0);
useEffect(() => {
let lastValue;
const unsubscribe = subscribe(() => {
const nextValue = snapshot(state).count;
if (lastValue !== nextValue) {
lastValue = nextValue;
rerender();
}
});
return unsubscribe;
}, []);
return (
{(useMemo(() => 'Count: '), [])}
{snapshot(state).count}
{useMemo(() => (${Math.random()}), [])}
);
};
``