Atomic State with Jotai: Minimal Boilerplate for React Native

Insight

Jotai introduces atoms—tiny, independent state units that can be read or written anywhere in your component tree. Unlike Redux Toolkit or Zustand, you don't need a central store or reducers; each atom lives on its own, making it perfect for feature‑scoped state like a modal toggle or a form field. Because React only re‑renders components that subscribe to a changed atom, you get fine‑grained updates without the overhead of a global store.

Example

import { atom, useAtom } from 'jotai';

// A simple boolean atom for a loading spinner
const loadingAtom = atom(false);

export const LoadingSpinner = () => {
  const [loading, setLoading] = useAtom(loadingAtom);
  return loading ? <ActivityIndicator /> : null;
};

// Somewhere else you can toggle it without prop drilling
export const fetchData = async () => {
  const setLoading = useSetAtom(loadingAtom);
  setLoading(true);
  await fetch('/api/data');
  setLoading(false);
};

Takeaway

Start with Jotai for isolated pieces of state—no reducers, no boilerplate. When a component only needs a single flag or value, an atom keeps the bundle lean and re‑renders minimal.