Jotai Has a Free API That Most Developers Don't Know About

Jotai is a primitive and flexible state management library for React. Unlike Redux or Zustand, Jotai uses an atomic model inspired by Recoil — but simpler.

Basic Atoms

import { atom, useAtom } from "jotai";

const countAtom = atom(0);
const doubleAtom = atom((get) => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [double] = useAtom(doubleAtom);
  return (
    <div>
      <p>{count} (double: {double})</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

Async Atoms

const userAtom = atom(async (get) => {
  const id = get(userIdAtom);
  const res = await fetch(`/api/users/${id}`);
  return res.json();
});

function UserProfile() {
  const [user] = useAtom(userAtom);
  return <div>{user.name}</div>;
}

Writable Derived Atoms

const celsiusAtom = atom(25);
const fahrenheitAtom = atom(
  (get) => get(celsiusAtom) * 9/5 + 32,
  (get, set, newF: number) => set(celsiusAtom, (newF - 32) * 5/9)
);

Atom with Storage (Persistence)

import { atomWithStorage } from "jotai/utils";

const themeAtom = atomWithStorage("theme", "light");
const langAtom = atomWithStorage("language", "en");

Integration with React Query

import { atomWithQuery } from "jotai-tanstack-query";

const postsAtom = atomWithQuery(() => ({
  queryKey: ["posts"],
  queryFn: () => fetch("/api/posts").then(r => r.json())
}));

Key Features

• Atomic model — minimal re-renders
• No providers needed (optional for SSR)
• Async atoms with Suspense support
• Persistence via atomWithStorage
• DevTools and React Query integration

---

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify — ready-made tools that extract data from any website in minutes. Or email me at [e-mail] for custom solutions.