Reactivity Reimagined: How Jotai Brings the Svelte Store Philosophy to React

In the world of frontend frameworks, Svelte has long been praised for its simplicity and elegant reactivity model, while React remains the heavyweight champion in terms of ecosystem and community size. But what happens when a library like Jotai brings Svelte’s store-like simplicity to the React world?

If you've worked with Svelte stores before and just picked up Jotai, you might have found yourself thinking:

“This feels very familiar.”

And you're right. Jotai and Svelte stores are conceptually close cousins — they both make state management simple, declarative, and reactive. Let’s explore the similarities, differences, and when you might want to choose one over the other.

🧠 The Philosophy: Store as a Primitive

Both Jotai and Svelte stores are grounded in the idea that state should be a first-class primitive, not something hidden behind complex boilerplate.

Svelte Example:

import { writable } from 'svelte/store';

const count = writable(0);

Jotai Example:

import { atom } from 'jotai';

const countAtom = atom(0);

In both, you're not creating reducers or actions — you're creating a primitive store (or atom) that can be used directly inside your component.

🔁 Reactivity: Automatic and Fine-Grained

Both libraries support automatic subscriptions, so any component that uses the store will automatically re-render when the value changes.

In Svelte:

<script>
  import { count } from './store.js';
</script>

<p>Count is {$count}</p>

In React with Jotai:

import { useAtom } from 'jotai';

const Counter = () => {
  const [count] = useAtom(countAtom);
  return <p>Count is {count}</p>;
};

There's no need to manually subscribe or write selectors. You just read the value, and the framework handles the rest.

🧮 Derived State Made Easy

Derived or computed values are declarative and clean in both systems.

Svelte:

import { derived } from 'svelte/store';
const doubled = derived(count, $count => $count * 2);

Jotai:

const doubledAtom = atom((get) => get(countAtom) * 2);

This approach ensures separation of concerns, keeps code readable, and avoids the mess of effect-based calculations.

🚦 Async State? Covered.

One area where Jotai stands out slightly is in its first-class async support, especially when combined with React Suspense.

Jotai Async Atom:

const userAtom = atom(async () => {
  const res = await fetch('/api/user');
  return await res.json();
});

You can directly await in the atom and rely on Suspense for loading states. Svelte supports async too, but usually requires manual async logic inside derived stores or via subscriptions.

📦 Ecosystem and Tooling

• Svelte stores are tightly integrated with the compiler and SvelteKit.
• Jotai fits seamlessly into any React app and works well with React DevTools, React Suspense, and React Server Components (with the right setup).

Jotai also has extensions for features like:

• atomWithStorage – for syncing with localStorage
• atomWithReducer, atomFamily, loadable – for advanced cases

🔍 Differences at a Glance

⚖️ So, Which One Feels Better?

If you're working in Svelte, its store system is unbeatable in terms of minimalism and performance. However, if you're staying in the React ecosystem, Jotai offers one of the cleanest, most Svelte-like experiences available for managing state.

You get the freedom of atoms, the power of composition, and no baggage of reducers or contexts unless you explicitly need them.

🧩 Extra Considerations

• Performance: Jotai avoids re-renders by scoping state access via atoms. This makes it more efficient than using React context directly.
• Scalability: For large apps, you can split atoms into modules, or memoize derived atoms, keeping everything maintainable.
• Server-Side Rendering (SSR): Jotai supports SSR, but configuration can be tricky with Suspense. Svelte handles this more natively.

🧵 Finally

The beauty of Jotai lies in how it bridges the gap between React's power and Svelte's elegance. If you're coming from Svelte or just appreciate minimal and reactive architecture, Jotai feels like a breath of fresh air in the React world.

So the next time someone says,

“React state management is too complex,”
introduce them to Jotai — and maybe whisper,
“It’s kind of like Svelte stores… but for React.”

Support Us