Introduction I’ve been sharing tips about Jotai on Twitter, calling them “Jotai tips.” As tweets tend to get lost over time, I thought it would be good to have all these tips in one place. So, here we go. Tip 1: Primitive-like atoms Jotai tips: Primitive-like atoms You can derive a primitive atom that behaves exactly the same, and you can add some side effects. pic.twitter.com/7r6tmRGNJ0 — Daishi Kato (@dai_shi) August 23, 2023 Tip 2: Early return Jotai tips: early return ... Read More

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. https://codesandbox.io/s/vjfpcd 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: https://t.co/SEBiC7bObe pic.twitter.com/kLcHnMN5je — 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

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. https://github.com/pmndrs/jotai/blob/v1.6.4/package.json#L18-L31 "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. https://github.com/pmndrs/valtio https://github.com/pmndrs/jotai 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