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

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

Introduction I stumbled upon 7GUIS tasks while reading XState Tutorials. This motivated me to challenge those 7 tasks with jotai. It turned out that this would be a good resource to learn jotai. They are from basic tasks to advanced tasked, and you will see how they are implemented, occasionally magically. It’s recommended to try it yourself first. If you succeed to implement it, then you can compare. Even if you fail, you can read and learn. ... Read More

Introduction Valtio is a library for global state primarily for React. It’s originally modeled to match with useMutableSource API. However, it turns out it’s a novel API to add immutability to mutable state. What is immutable state? JavaScript doesn’t support immutability as language, so it’s just a coding contract. const immutableState1 = { count: 0, text: 'hello' }; // update the state const immutableState2 = { ...immutableState1, count: immutableState1.count + 1 }; // update it again const immutableState3 = { . ... Read More

Introduction The React team announced The Plan for React 18 with various features. Among them, concurrent rendering is one of my interests because I have been developing various global state libraries and there are known issues called “tearing” and “branching”. Tearing is an undesirable behavior in which two components render with different values for same global state. Branching is a desirable behavior in which a component renders with a stale value for a state in a transition update. ... Read More

Introduction It’s been a while since I started developing reactive-react-redux and react-tracked. These libraries provide so called state usage tracking to optimize render in React. This approach, I think, is pretty novel and quite a lot of my effort has been put to improve its performance. Lately, I thought it would be nicer if this can be used more broadly. I wondered if it can be used in vanilla JS. What would be an API in vanilla JS? ... Read More

Introduction I have been developing various global state libraries for React. For example: react-tracked react-hooks-global-state My main motivation is to eliminate selector functions that are only required for render optimization. Render optimization here means it avoids extra re-renders. An extra re-render is a re-render process that produces the same view result as before. Since Recoil is announced, I’m very interested in atom abstraction because it eliminates selector functions for render optimization and the API seems pretty intuitive. ... Read More