For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/react/state-management/valtio.md.
ReactLynx logo
ReactLynx
  • English

      • Valtio

      Using valtio

      Valtio is a simple and powerful proxy-based state management solution, offering fine-grained subscriptions and reactivity.

      Installation

      npm
      yarn
      pnpm
      bun
      deno
      npm install valtio

      Example

      import { useEffect } from '@lynx-js/react';
import { proxy, useSnapshot, subscribe } from 'valtio';

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

export function App() {
  const snap = useSnapshot(state);

  const handleTap = () => {
    state.count++;
  };

  useEffect(() => {
    const unsubscribe = subscribe(state, () => {
      console.log('state changed: ', state.count);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <view>
      <text>{snap.count}</text>
      <text bindtap={handleTap}>Tap</text>
    </view>
  );
}

      See valtio - basic for details.

      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.