Skip to content

valtiojs/valtio-signal

Folders and files

NameName
Last commit message
Last commit date
Mar 23, 2024
Jul 4, 2024
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jun 3, 2024
Jun 3, 2024
Jun 3, 2024
Jan 1, 2023
Jun 3, 2024
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jun 3, 2024
Jun 3, 2024
Jan 26, 2025
Jan 26, 2025

Repository files navigation

valtio-signal

CI npm size discord

Another React binding for Valtio proxy state

What it is

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.

How to use it

/** @jsxImportSource valtio-signal */

import { proxy } from 'valtio/vanilla';
import { $ } from 'valtio-signal';

const state = proxy({ count: 0 });

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

const Counter = () => <div>Count: {$(state).count}</div>;

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.

Original code

/** @jsxImportSource valtio-signal */

const Counter = () => (
  <div>
    Count: {$(state).count} ({Math.random()})
  </div>
);

Pseudo transformed code

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 (
    <div>
      {(useMemo(() => 'Count: '), [])}
      {snapshot(state).count}
      {useMemo(() => ` (${Math.random()})`, [])}
    </div>
  );
};

About

Another React binding for Valtio proxy state

Resources

License

Stars

Watchers

Forks

Packages

No packages published