Recent content on Daishi Kato's blog
Introduction 
 As it turns out, there are quite a few talks I’ve done so far,
and even for me, it’s hard to remember all of them.
Although it’s a bit embarrassing to see some old talks of mine,
I decided to gather them here. 
 The following is ordered from the latest session back to the earliest. 
 Livestream: Nick Taylor - 2025 
 How Waku, the Minimal…
Introduction 
 I’ve been developing three React state management libraries: Zustand, Jotai, and Valtio. So, how are they going to hold up in the new era with the React Compiler and React Server Components (RSCs)? This post shares my random thoughts on the topic. 
 What are state management libraries? 
 State management libraries manage the state of your application. For my…
Introduction 
 RSC stands for React Server Component, but in this post, I’ll use RSC to refer to a broader architecture consisting of two key aspects: 
 
 The core feature, which is the ability to serialize and deserialize React components and other values, and 
 The best practice based on the core feature, which I kind of think is still to be explored. 
 
 SPAs, or Single…
Introduction 
 In this post, I would like to reflect on my journey in open source software development. 
 My first OSS contribution 
 Around the year 2000, I made my first contribution to OSS: an Ethernet driver for NetBSD/mac68k. It was written in C, and now, looking back, I can barely understand the code. 
 Found this link on the Web: 
…
Introduction 
 There was a discussion in our team after releasing Zustand v3 and the brand new Jotai. It was about whether we could develop another library for global state. 
 In this post, I will reflect on the start of Valtio’s development and its API design. 
 Hesitation at First 
 While the idea of a proxy state sounded promising, I was hesitant to develop a third global…
Introduction 
 In this post, I would like to share the story of why I started developing Jotai. While Jotai is often seen as a similar solution to Recoil, there is a longer history behind its development. 
 React Hooks 
 It was October 2018 when React Hooks were first announced. I liked the idea of developing logic outside of React components, and believed that many libraries would…
Introduction 
 In this post, I would like to share the story behind Zustand’s development. To be precise, I wasn’t the original author of Zustand, and when Zustand v0 was born, I was developing other global state libraries, especially React-Tracked. By the way, I now consider myself a (secondary) author of Zustand. 
 I found my tweet mentioning Zustand, comparing it with other…
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…
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…
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 {…
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…
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…
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…
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…
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…
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' :…
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…
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…
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…
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…
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…
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…
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…
Introduction 
 Redux is a framework-agnostic library for global state.
It’s often used with React. 
 While I like the abstraction of Redux,
React will introduce Concurrent Mode in the near future.
If we want to get benefit of useTransition ,
state must be inside React to allow state branching.
That means we can’t get the benefit with Redux. 
 I’ve…
Introduction 
 Developing with React hooks is fun for me.
I have been developing several libraries.
The very first library was a library for global state.
It’s naively called “react-hooks-global-state” which
turns out to be too long to read. 
 The initial version of the library was published in Oct 2018.
Time has passed since then, I learned a lot, and…
Introduction 
 This is a short post about my small library. 
 Apollo Client 
is a library for GraphQL.
 Apollo Link 
is an interface to extend Apollo Client. 
 Typically, you would initialize apollo client like this. 
 import { ApolloClient } from 'apollo-client' ;
 import { InMemoryCache } from 'apollo-cache-inmemory' ;
 import { HttpLink } from…
Introduction 
 I have been developing React Tracked, which is
a library for global state with React Hooks and Context. 
 https://react-tracked.js.org 
 This is a small library and focuses on only one thing.
It optimizes re-renders using state usage tracking.
More technically, it uses Proxies to detect the usage in render,
and only triggers re-renders if necessary. 
…
Introduction 
 React released Concurrent Mode in the experimental channel
and Suspense for Data Fetching .
This release is for library authors, and not for production apps yet.
The new data fetching pattern proposed is called Render-as-You-Fetch. 
 This post mainly discuss Render-as-You-Fetch for basic fetch calls,
like calling REST APIs. But, some of discussions are not…
Introduction 
 We have been waiting for “Suspense for Data Fetching” for a long time.
It is now provided as an experimental feature in
 the experimental channel . 
 Check out the official docs for details. 
 
 Introducing Concurrent Mode 
 Suspense for Data Fetching 
 Concurrent UI Patterns 
 Adopting Concurrent Mode 
 Concurrent Mode API…
Introduction 
 I have been developing a React Hooks library called React Tracked.
This is the library I put much effort lately as well as
my other libraries. 
 https://github.com/dai-shi/react-tracked 
 This library solves a performance issue with React Context.
For those who are interested in the fundamental problem,
please take a look at the long issue . 
…
Introduction 
 It is said that Redux has been overused in some use cases
and React context+hooks plays well in such use cases.
While I agree with it, Redux should work well in some other situations.
Redux should help developing larger apps with many developers.
Various libraries in Redux ecosystem should accelerate development.
There’s another situation in which Redux…
Introduction 
 I have been developing several react hooks libraries.
They provide custom hooks for certain purposes.
One of them is for web workers.
I started it for fun. I got some feedbacks and improved.
This post shows the current implementation which aims the use in production. 
 In this field, Comlink 
provides a nice transparent API with Proxies.
Some might…
Introduction 
 React context and useContext are very handy.
You would have no problem using it while developing a small app.
If the size of your app became non-trivial,
you might experience some performance issues with regard to useContext.
This is because useContext will trigger rerender
whenever the context value is changed.
This happens even if the part of the value…
Motivation 
 I love Redux. But that doesn’t mean I like all parts of Redux ecosystem.
Some people dislike Redux because of its boilerplate code. That’s sad.
Boilerplate code is not from the Redux core, but from the ecosystem.
Don’t get me wrong. Best practices are nice and I think
the recent work of Redux Starter Kit is great. (Claps to Mark) 
 I think I…
Introduction 
 I have been developing several React hooks libraries for months.
In this post, I will explain why and how I developed
a React Redux binding library with React hooks.
The library is implemented to be concurrent mode friendly.
Let’s discuss why it’s important and what’s the technique behind it. 
 React concurrent mode has not come yet,
and…
Introduction 
 React useContext is very handy to avoid prop drilling.
It can be used to define global state or shared state
that multiple components in the tree can access. 
 However, useContext is not specifically designed for
global state and there’s a caveat.
Any change to context value propagates all useContext
to re-render components. 
 This post shows…
Introduction 
 React hooks have changed the way to compose components.
This post will show an example which is very hooks-oriented. 
 We use two libraries: react-tracked and immer.
While immer makes it easy to update state in an immutable way,
react-tracked makes it easy to read state with tracking for optimization.
Please check out the repo for more details. 
…
Introduction 
 There are many libraries for global state with React hooks.
React Redux also provides hooks API, which is very clean. 
 In general, I would avoid using global state.
It would reduce the isolation of components.
Multiple contexts should work fine for certain use cases. 
 But, what if we really need a global state. 
 Problem 
 When a state is a…
Introduction 
 Since React hooks landed,
there has been many libraries proposed for global state.
Some of them are simple wrappers around context.
Whereas, some of them are full featured state management systems. 
 Technically, there are several implementations how to store
state and notify changes.
We don’t go in detail in this post, but just note two axes. 
…
Introduction 
 useReducer is a powerful hook. It’s known that
 useState is implemented with useReducer . 
 In the React hooks docs , it’s noted like this: 
 
 useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize…
Introduction 
 React-Redux provides hooks API 
with nice abstraction.
Especially, useSelector is probaly less misused than mapStateToProps . 
 react-tracked 
is a library for global state without Redux.
This library provides almost compatible hooks API to React-Redux.
It’s developed with performance in mind, and it should
be as performant as React-Redux, even…
Introduction 
 There are many libraries to provide global state in React.
React itself doesn’t provide such a feature,
probably because separation of concerns is important
and having global state naively is not idiomatic.
However, in certain cases, having global state is good
as long as it’s properly implemented.
It’s likely that performance drops…
Introduction 
 If you had already used Redux and loved it,
you might not understand why people try
using React context and hooks to replace Redux (a.k.a no Redux hype).
For those who would think Redux DevTools Extension and middleware
are nice to have, Redux and context + hooks are actually two options.
Context + hooks is just fine to share state among…
Introduction 
 Global state or shared state is one of the biggest issues
when you start developing a React app.
Should we use Redux? Do hooks provide a Redux-like solution?
I would like to show four patterns toward using Redux.
This is my personal opinion and mainly for new apps. 
 Pattern 1: Prop passing 
 Some might think it wouldn’t scale, but the most basic…
Introduction 
 Recently, React Redux released hooks API. It’s v7.1.0-alpha.4 as of writing. 
 https://github.com/reduxjs/react-redux/releases/tag/v7.1.0-alpha.4 
 On the other hand, I’ve been developing a new React Redux binding library with hooks and Proxy. 
 https://github.com/dai-shi/reactive-react-redux 
 It’s time to benchmark both of them to have better…
Introduction 
 React Redux is one of popular web tech stacks. As I found React hooks so promising, I have been developing a hooks-based library for React Redux called “reactive-react-redux.” 
 https://github.com/dai-shi/reactive-react-redux 
 Coding style using this library is mentally different from the official react-redux. Thanks to Proxy, developers don’t need to…
This short article shows code examples how hooks are analogous to components in terms of composition. Without a word, let’s jump in the code. 
 React components 
 Let’s use a minimalistic example. Here’s a component. 
 const Person = ({ person }) => (
 < div >
 < div className = 'personFirstName' >
 < span > First Name : < span >
 < span >{ person .…
Background 
 React 16.8 added a new API, Hooks. If you haven’t learned hooks yet, go to the official site and read the entire document before continuing this article. 
 https://reactjs.org/docs/hooks-intro.html 
 Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. This…
reactjs.org
This article is about how to…
Introduction 
 According to React 16.x Roadmap , we are expecting Concurrent Mode soon. 
 
 React 16.x (~Q2 2019): The One with Concurrent Mode
Concurrent Mode lets React apps be more responsive by rendering component trees without blocking the main thread. It is opt-in and allows React to interrupt a long-running render (for example, rendering a new feed story) to handle a…
Introduction 
 While I don’t feel like coding React without hooks, react-cache still seems to be still far away. Surely, caching in data fetching important, nevertheless I would like to seek possibilities of implementations only with React Hooks. These might be obsoleted in the future, but I want something today, that is “useFetch”. This could be still useful without…