How to manage state using Zustand or Jotai in a small app?

To manage state in a small app, Zustand and Jotai offer lightweight, efficient solutions with distinct approaches. Zustand provides a centralized store model similar to Redux but with less boilerplate, while Jotai adopts an atomic state approach focusing on granular, fine-tuned reactivity.

Zustand is ideal when you want a simple global store with straightforward updates and easy integration both inside and outside React components. Jotai is better suited for managing many independent state atoms with minimal re-renders, especially useful for complex or rapidly changing UI states. Both support TypeScript and integrate well with React Suspense, making them excellent for small to medium apps, depending on state architecture and developer preference.

Code

/ Zustand example
import {create} from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));

// in component
const count = useStore(state => state.count);
const increment = useStore(state => state.increment);

// Jotai example
import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

// in component
const [count, setCount] = useAtom(countAtom);