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/zustand.md.
  • English
  • Zustand

    Using zustand

    Zustand is a small, fast, and scalable state management solution with a comfy API based on React Hooks, offering flexibility while maintaining some level of convention.

    Installation

    npm
    yarn
    pnpm
    bun
    deno
    npm install zustand

    Example

    import { useEffect } from '@lynx-js/react';
    import { create } from 'zustand';
    
    type State = {
      count: number;
    };
    
    type Action = {
      increment: () => void;
    };
    
    const useStore = create<State & Action>((set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }));
    
    export function App() {
      const { count, increment } = useStore();
    
      useEffect(() => {
        console.log('count changed:', count);
      }, [count]);
    
      return (
        <view>
          <text>{count}</text>
          <text bindtap={increment}>Tap</text>
        </view>
      );
    }

    See zustand - guides 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.