Latest Posts

Introduction Jotai is developed to solve an extra re-render issue with React Context. A major challenge in its development has been the support of both Suspense and Concurrent rendering. Otherwise, it would have been a simpler implementation and its implementation would closely resemble that of any observable-like libraries. As of writing, Jotai is fully compatible with Suspense and Concurrent rendering with some exceptions. There’s a repo to evaluate some details. ... Read More
Introduction Jotai is a powerful library designed for seamless integration with React Suspense. Unlike Zustand, Jotai’s primary focus is React Suspense from the beginning. In its simplest form, Jotai effortlessly works with Suspense, and gives superior developer experience and user experience with async data. import { Suspense } from "react"; import { atom, useAtomValue, useSetAtom } from "jotai"; const id = 1; const postAtom = atom(async (get) => { const res = await fetch(`https://jsonplaceholder. ... Read More
Introduction Note: This post focuses on Zustand library’s implementation in TypeScript. It does not affect the user code, which should be kept clean. Zustand’s JavaScript implementation is very small, as seen in the following tweet. Here's the Zustand code in JS in a tweet. I think I did this before, but this is slightly a new version. Not in 140 chars, but in an image. 😅 Source: — Daishi Kato (@dai_shi) October 20, 2022 However, its TypeScript implementation is quite complicated. ... Read More
Introduction In the world of web frontend development, signals have become a popular topic. At their core, signals are used to represent changes in state over time. Some developers have discussed the potential of using signals in conjunction with React. Signals are actually an older concept, and it’s uncertain how they are understood by modern web developers. Initially, I was confused about the characteristics of signals, but I later realized that they can be boiled down to two main aspects: ... Read More
Introduction When I first saw SolidJS and Preact Signals, I thought they are interesting but they are different from React. What made me motivated is @preact/signals-react. I didn’t like the original implementation using REACT INTERNALS, and that drove me to create something. We already had Jotai. Jotai atoms are like signals, representing reactive sources, and allowing to form a dependency graph or a data flow. The missing piece was signal-like syntax without hooks. ... Read More
Introduction When Jotai development was started (before releasing v1), it has a simple goal. It optimizes re-renders, which was often a problem with useState and useContext using a big state object. We also wanted to avoid using selector function, which is popularized by Redux and widely used. In the early days, I wanted to have data fetching solution, but didn’t want to complicate Jotai itself. So, jotai/query package was created. It’s an integration with React Query v3. ... Read More

Why We Need Jotai v2 API
6 December 2022

Introduction Jotai is a library for React state management. The API (let’s call it v1 API) is designed to a) be friendly with Concurrent React, and b) be compatible with Recoil as much as possible. What does it mean? First, atom read function is evaluated in the render phase in React. For example, consider a simple derived atom. const countAtom = atom(0); const doubleAtom = atom((get) => get(countAtom) * 2); In the example, (get) => get(countAtom) * 2 is the read function. ... Read More
Introduction If someone has already looked into package.json in the jotai library, they may find "exports" field. "exports": { "./package.json": "./package.json", ".": { "types": "./index.d.ts", "module": "./esm/index.js", "import": "./esm/index.mjs", "default": "./index.js" }, "./utils": { "types": "./utils.d.ts", "module": "./esm/utils.js", "import": "./esm/utils.mjs", "default": "./utils.js" }, In the Node.js docs, it is described as Package entry points. Node.js v12.7.0 started implementing it. Nowadays, it’s used also by bundlers like webpack and vite. ... Read More
Introduction Recently, I often got asked about this question: Which is recommended, valtio or jotai? For those who are not familiar with them, they are two out of many state management libraries that I developed. Now, from the library perspective, their implementations are very different. However, from the usage perspective, I understand the confusion. Both serve similar functionalities and we don’t usually use both in a single app. ... Read More
Introduction In the previous article, we explained how Valtio proxy state works. It tracks mutations of state and create immutable snapshot. Let’s recap the API in vanilla part of Valtio. // Create a new proxy state to detect mutations const state = proxy({ count: 0 }); // You can mutate it ++state.count; // Create a snapshot const snap1 = snapshot(state); // ---> { count: 1 } // Mutate it again state. ... Read More