Daishi Kato's blog

My React Talks to Date in Various Formats

Sat, 18 Oct 2025 01:00:00 +0900

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 React Framework Came to Be

Thoughts on State Management Libraries in the React Compiler Era

Tue, 07 Jan 2025 22:00:00 +0900

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 libraries specifically, the primary goal isn’t just about how the state is managed. This ties into why there are three libraries. They differ in how they deal with states (for example, immutable, atomic, proxy, etc.) and how developers manage their states.

Thoughts on What RSC Means for SPAs

Tue, 26 Nov 2024 21:00:00 +0900

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 Page Applications, can often be deployed as static files. While a separate server may exist, it typically doesn’t serve the SPA itself. In this context, an SPA can have multiple pages, but let’s not argue about the precise definition.

How I Got Involved in OSS

Tue, 03 Sep 2024 22:00:00 +0900

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:

http://cvsweb.netbsd.org/bsdweb.cgi/src/sys/arch/mac68k/nubus/if_netdock_nubus.c?rev=1.35&content-type=text/x-cvsweb-markup

Chicken Scheme

Another phase in my OSS journey was working with Scheme. Although my contributions were small, I did contribute to a few libraries.

How Valtio Was Born

Sun, 18 Aug 2024 21:00:00 +0900

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 state library at first. We were already maintaining two libraries in the same problem domain. It felt like adding another library would make no sense.

How Jotai Was Born

Fri, 09 Aug 2024 22:00:00 +0900

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 soon adopt this approach. I wanted to develop something, and global state management was one field I picked. My motivation was to avoid Redux selectors, also known as mapStateToProps at that time. In my work experience, I found that it’s pretty hard for beginners to understand referential equality. To avoid extra re-renders, we may need to use memoization libraries such as reselect. It felt unnecessary if the computation of selectors themselves was fairly lightweight.

How Zustand Was Born

Sun, 14 Jul 2024 13:00:00 +0900

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 libraries, including mine.

Comparison of React hooks libraries for global state. Only about performance/optimization. Not about API design. Please let me know if there are other libraries. https://t.co/UfoKOh8APL #reactjs #javascript #reacthooks #redux pic.twitter.com/bPIKzdmP3u

Jotai Tips

Wed, 03 Apr 2024 23:00:00 +0900

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

Unlike React hooks, Jotai atoms have no limitations regarding early return. pic.twitter.com/0LaDFNeGc3

Why useSyncExternalStore Is Not Used in Jotai

Sat, 28 Oct 2023 11:00:00 +0900

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.

How to Use Jotai and useTransition for Mutation

Fri, 28 Jul 2023 01:00:00 +0900

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.typicode.com/posts/${id}`);
  const data = await res.json();
  return data;
});

const Post = () => {
  const { title } = useAtomValue(postAtom);
  return <div>Title: {title}</div>;
};

const App = () => (
  <Suspense fallback="Loading...">
    <div>
      <Post />
    </div>
  </Suspense>
);

export default App;

There are no issues so far.

Why Zustand Typescript Implementation Is So Ugly

Wed, 19 Jul 2023 15:00:00 +0900

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. There are several reasons, one of which we explore in this post.

Why You Don't Need Signals in React

Sun, 23 Apr 2023 21:00:00 +0900

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:

Demystifying Create React Signals Internals

Sun, 26 Feb 2023 23:00:00 +0900

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.

You Might Not Need React Query for Jotai

Tue, 31 Jan 2023 14:00:00 +0900

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. It went well, but I noticed a certain mismatch with users. While my mental model was to create a data fetching API for Jotai, people want full features from React Query. I had been struggling with the mismatch, and ended up with creating a new library jotai-tanstack-query. It integrates TanStack Query v4 and covers full features.

Why We Need Jotai v2 API

Tue, 06 Dec 2022 14:00:00 +0900

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. When countAtom is updated, the library doesn’t invoke the read function of doubleAtom immediately. Instead, it triggers the component that uses doubleAtom to re-render. The component re-renders eventually, and it’s when the read function of doubleAtom is invoked. The benefit of this behavior might be hypothetical, but React allows to schedule re-renders, which means it can skip invoking read functions in concurrent rendering.

How Jotai Specifies Package Entry Points

Sun, 17 Apr 2022 17:00:00 +0900

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.

We use package entry points for separating modules. For example, jotai is a core module exporting core functions. jotai/utils is a separate module which exports additional functions based on core functions. (By the way, another option is to publish two packages instead. But, we prefer multiple entry points in a single package.)

When I Use Valtio and When I Use Jotai

Sun, 30 Jan 2022 18:00:00 +0900

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.

How Valtio Proxy State Works (React Part)

Sun, 26 Dec 2021 22:00:00 +0900

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.count *= 10;

// Create a snapshot again
const snap2 = snapshot(state); // ---> { count: 10 }

// The previous snapshot is not changed
console.log(snap1); // ---> { count: 1 }

// You can subscribe to it
subscribe(state, () => {
  console.log('State changed to', state);
});

// Then, mutate it again
state.text = 'hello'; // ---> "State changed to { count: 10, text: 'hello' }"

Now, let’s see how we can use the state in React.

Learning React State Manager Jotai With 7GUIS Tasks

Mon, 13 Sep 2021 20:23:30 +0900

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.

How Valtio Proxy State Works (Vanilla Part)

Fri, 27 Aug 2021 22:00:00 +0900

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 = { ...immutableState2, count: immutableState2.count + 1 };

Some people might be familiar with this pattern, or it can be new to some other people. We always create a new object without modifying the existing ones. This allows us to compare the state objects.

Testing Global State Libraries With React 18 Alpha Concurrent Rendering

Thu, 10 Jun 2021 21:00:00 +0900

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.

Developing a Memoization Library With Proxies

Sun, 29 Nov 2020 14:00:00 +0900

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? It would be good if it’s easy to understand. My idea ended up with memoization, mainly because the primary goal is to be a replacement of reselect.

Developing React Global State Library With Atom Abstraction

Thu, 13 Aug 2020 08:00:00 +0900

Introduction

I have been developing various global state libraries for React. For example:

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.

Redux in Worker: Off-main-thread Redux Reducers and Middleware

Sun, 29 Mar 2020 20:00:00 +0900

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 been developing React Tracked for global state that allows state branching. It works well in Concurrent Mode. That leaves me a question: What is a use case that only Redux can do.

Steps to Develop Global State for React With Hooks Without Context

Tue, 18 Feb 2020 23:00:00 +0900

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 now v1.0.0 of the library is published.

https://github.com/dai-shi/react-hooks-global-state

This post shows simplified versions of the code step by step. It would help understand what this library is aiming at, while the real code is a bit complex in TypeScript.

Lazy Load Apollo Link in Apollo Client

Fri, 10 Jan 2020 23:00:00 +0900

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 'apollo-link-http';

const cache = new InMemoryCache();
const link = new HttpLink({ uri });

const client = new ApolloClient({
  cache: cache,
  link: link,
});

I want to define the link in another file and lazy load it, because it is not an HttpLink but a complicated large link.

How to Handle Async Actions for Global State With React Hooks and Context

Fri, 20 Dec 2019 23:00:00 +0900

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.

Because of that, the usage of React Tracked is very straightforward. It is just like the normal useContext. Here’s an example.

Diving Into React Suspense Render-as-You-Fetch for REST APIs

Mon, 16 Dec 2019 22:00:00 +0900

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 limited to REST. One could invoke GraphQL endpoints with simple fetch calls. For more complex use cases with GraphQL, it’s worth looking into Relay documentation too.

Developing a React Library for Suspense for Data Fetching in Concurrent Mode

Sun, 03 Nov 2019 21:00:00 +0900

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.

They are trying best to explain new mind sets with analogies. That means it’s totally different from the usage with traditional React. Yes, it is different and promising.

React Tracked Documentation Website with Docusaurus v2

Tue, 15 Oct 2019 23:00:00 +0900

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.

What’s notable in this library is that it doesn’t provide any new fancy features. You can simply replace Context.Provider and useContext with the custom ones, it just works with performance.

Off-main-thread React Redux with Performance

Mon, 16 Sep 2019 11:00:00 +0900

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 may help, and that is Web Workers.

A while back, Surma posted a nice blog post: React + Redux + Comlink = Off-main-thread

How I Developed React Hooks for Web Workers

Sun, 08 Sep 2019 16:00:00 +0900

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 have already tried it with React. I have two reasons why I don’t use it for my library.

4 options to prevent extra rerenders with React context

Wed, 21 Aug 2019 21:00:00 +0900

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 is not used in render. This is by design. If useContext were to conditionally trigger rerenders, the hook would become non-composable.

React hooks-oriented Redux coding pattern without thunks and action creators

Mon, 12 Aug 2019 10:00:00 +0900

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 have my own understanding of how to use Redux with React. It may not be common and probably it will never be the mainstream. I understand Redux is useful and tuned for larger applications. What I have in mind is the usage for smaller apps and for beginners.

How I developed a Concurrent Mode friendly library for React Redux

Sat, 27 Jul 2019 23:00:00 +0900

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 all discussions are based on the current unstable behavior. Please note that when concurrent mode is released and best practice is researched, things may change.

Effortless render optimization with state usage tracking with React hooks

Sun, 21 Jul 2019 13:00:00 +0900

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 some example code about the problem and the solution with state usage tracking.

Problem

Let’s assume a person object as a state.

How to use react-tracked: React hooks-oriented Todo List example

Mon, 08 Jul 2019 01:00:00 +0900

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.

https://github.com/dai-shi/react-tracked

The example we show is the one from Redux: Todo List

Folder structure

- src/
  - index.tsx
  - state.ts
  - hooks/
    - useAddTodo.ts
    - useToggleTodo.ts
    - useVisibilityFilter.ts
    - useVisibleTodos.ts
  - components/
    - AddTodo.tsx
    - App.tsx
    - FilterLink.tsx
    - Footer.tsx
    - Todo.tsx
    - VisibleTodoList.tsx

We have two folders components and hooks. Components are basically views. Hooks include logic.

What is state usage tracking? A novel approach to intuitive and performant global state with React hooks and Proxy

Sun, 07 Jul 2019 17:00:00 +0900

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 non-trivial object, it’s not likely to use all properties of the object for one component to render.  What most libraries do is to provide a selector interface. With the selector interface, developers can specify which part of the state to use in a component. In general, a selector is a function, but there are alternative ways to specify part of the state. For example, by property names or paths. In any case, developers are responsible to write proper selectors. 

Four different approaches to non-Redux global state libraries

Sat, 06 Jul 2019 16:19:00 +0900

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.

whether context based or external store
whether subscriptions based or context propagation

In this post, we focus on API design of hooks at the consumer end. In my observation, there are four approaches to the API design. Let’s see each approach by example in pseudo code. As a simple example, we assume an app that has the followings.

React hooks useState and useReducer are equivalent in theoretical expressiveness

Mon, 01 Jul 2019 08:00:00 +0900

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 performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

For a long time, I misunderstood that useReducer is more powerful than useState and there’s some optimization that can’t be achieved by useState.

Redux-less context-based useSelector hook that has same performance as React-Redux

Sun, 16 Jun 2019 23:00:00 +0900

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 though it utilizes only React context. See the GitHub repo for more information.

https://github.com/dai-shi/react-tracked

This post shows benchmark results to convince that it actually is performant in one scenario.

Super performant global state with React context and hooks

Sat, 15 Jun 2019 23:00:00 +0900

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 down compared to using non-global state (incl. multiple contexts).

This post introduces a library for global state with performance.

Redux meets hooks for non-redux users: a small concrete example with reactive-react-redux

Mon, 03 Jun 2019 23:00:00 +0900

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 components, however if apps get bigger, they are likely to require Redux or other similar solutions; otherwise they end up having many contexts that can’t be handled very easily. (I’d admit this is hypothetical and we would be able to find better solutions in the future.)

Four patterns for global state with React hooks: Context or Redux

Mon, 27 May 2019 00:50:00 +0900

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 pattern should still be prop passing. If the app is small enough, define local state in a parent component and simply pass it down to child components. I would tolerate two level passing, meaning one intermediate component.

Benchmark the alpha-released hooks API in React Redux with alternatives

Thu, 02 May 2019 12:00:00 +0900

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 understanding in performance. The reactive-react-redux library utilizes Proxy to auto-detect state usage, hence it technically has overhead which would affect performance. We would like to learn how much it will be affected in a realistic example.

New React Redux coding style with hooks without selectors

Sat, 20 Apr 2019 12:00:00 +0900

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 care about optimization, but just focus on composition of logic.

This library provides two basic hooks: useReduxState and useReduxDispatch. This article shows example code how to use them.

Compose React hooks like composing React components

Thu, 18 Apr 2019 12:00:00 +0900

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.firstName}</span>
    </div>
    <div className="personLastName">
      <span>Last Name:<span>
      <span>{person.lastName}</span>
    </div>
  </div>
);

Well, this component is a little bit big, so let’s split it into functions and compose them.

How to create React custom hooks for data fetching with useEffect

Wed, 03 Apr 2019 12:00:00 +0900

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 create custom hooks for data fetching. As described in the roadmap, React is planning to release react-cache and Suspense for data fetching in the near future. This is going to be a standard way of data fetching in React, however, data fetching with useEffect is still useful in certain use cases where the lifecycle of fetched data is the same as that of components. In such use cases, caching is not important and we can safely store fetched data in a component local state.

How to properly use the React useRef hook in Concurrent Mode

Thu, 07 Mar 2019 12:00:00 +0900

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 high-priority event (for example, text input or hover). Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections.

useFetch: React custom hook for Fetch API with Suspense and Concurrent Mode in Mind

Mon, 04 Feb 2019 12:00:00 +0900

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 react-cache in case sophisticated caching is not necessary.

I’ve started developing “useFetch” as a tutorial to build a custom hook.

Playing with React Hooks and Web Workers

Tue, 29 Jan 2019 12:00:00 +0900

Introduction

React Hooks is something I’ve been working on lately. What’s wonderful is creating custom hooks. If you encapsulate logic nicely in a hook, it can be shared among components and used intuitively. You can find my custom hooks in my GitHub repos, some of which are very experimental.

This time, my experiment is to combine React Hooks and Web Workers. I know it’s not too difficult, but let me explain a bit in this short article.

My first WebAssembly trial with Node.js only

Tue, 22 Jan 2019 12:00:00 +0900

Introduction

One of the technologies we should keep eyes on in the web world is WebAssembly or wasm. As I am new to it, I won’t describe much of its fundamentals. Please visit the official web site to learn from scratch.

https://webassembly.org/

This short article describes my first trial on wasm. What I want to try is just to run example code, but I’d start with writing the example code in wasm(wat).

A thought on React Context default value

Fri, 11 Jan 2019 12:00:00 +0900

Introduction

It’s been about a year since React Context API is out. This is powerful and it’s even more powerful with upcoming React Hooks API, namely useContext. Please check out official documents to learn them in detail.

https://reactjs.org/docs/context.html

https://reactjs.org/docs/hooks-intro.html

Now, this very short article is just about the default value of a context. When you create a context, you pass a default value in the first argument.

The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Note: passing undefined as a Provider value does not cause consuming components to use defaultValue.

Developing React custom hooks for abortable async functions with AbortController

Mon, 31 Dec 2018 12:00:00 +0900

In my previous article, I introduced how the custom hook useAsyncTask handles async functions with AbortController and demonstrated a typeahead search example. In this article, I explain about the implementation of useAsyncTask.

Recap

JavaScript promise is not abortable. The fetch API is based on promise, and hence you can’t cancel it in pure JavaScript. To cancel fetch, the DOM spec introduced AbortController. The AbortController is a general interface and not specific to fetch. Technically, we can use it to cancel promises, and it would be nice to have an easy way to handle abortable async functions. In the React world, we are expecting the Hooks API soon. I’ve started a project to implement custom hooks for abortable async functions.

Injecting a client-side script in GraphQL Playground in Apollo Server

Sat, 22 Dec 2018 12:00:00 +0900

This is a short article to explain how I inject a client-side script in Playground. Note that this is a workaround solution until I find a better way.

Background

When developing a GraphQL server with Apollo Server, GraphQL Playground is a tool that you are likely to use. Now, suppose we have an Apollo server that authenticates with a token in an HTTP header. Luckily, Playground has an editor to specify HTTP headers. However, what if we need to call OAuth provider to get an accessToken? Surely, we could run curl to get a token, copy it in the terminal and paste it in the browser. It should be much easier if we could simply sign in in the browser.

Developing React custom hooks for Redux without react-redux

Fri, 14 Dec 2018 12:00:00 +0900

Background

Ever since I learned Redux, I’ve been thinking an alternative integration of react and redux to the official react-redux library. The intuition behind it is that Redux is super simple which I like a lot, whereas react-redux is complex because of performance tuning. If you are developing a business product, the official react-redux is to go without a doubt, but if you are playing with creating a toy app or you are just starting learning Redux, you might want something more straightforward.

Introduction to abortable async functions for React with hooks

Tue, 11 Dec 2018 10:00:00 +0900

There is a follow-up article which describes the implementation details of the library. Please visit here.

TL;DR

Just visit the example in codesandbox and try it.

Background

You can’t cancel promises in JavaScript and that’s one of the reason why libraries such as redux-saga and redux-observables are popular because they allow cancellation. While they are good solutions as well as Redux is, there might be a case when you want just a cancellation mechanism for a promise, not the entire framework. As is noted JavaScript doesn’t have cancellation mechanism, but DOM has it. It’s called AbortController. It’s only supported in recent browsers, but polyfills should help for old browsers and Node.js.

Creating a Minimal Expo React Native Project with TypeScript and Jest

Sat, 01 Dec 2018 12:00:00 +0900

This article shows the steps to create a minimal Expo project. The project uses TypeScript and Jest. Note that this procedure is based on Expo SDK31 and may be invalid in the future.

Install Expo CLI

As described in the official doc, let’s install the CLI tool.

$ npm install -g expo-cli

Note: I prefer using npx and I use npx in my project, but expo-cli depends on @expo/dev-tools which depends on old graphql. It’s just safer to do global install unless you know the issues that could arise.

React Hooks Tutorial on Developing a Custom Hook for Data Fetching

Thu, 29 Nov 2018 12:00:00 +0900

Introduction

React Hooks are a new feature coming in React 16.7. It allows us to write stateful function components that were impossible before without class components. The official docs are must-read, so check them out if you haven’t.

https://reactjs.org/docs/hooks-intro.html

Besides stateful function components, this new feature allow us to build a custom hook to share logic between components. This has been possible with High-order Components (HoCs), and although there’s technically no difference what hooks can achieve, hooks simplify it a lot and reduce so called “wrapper hell”. This simplicity encourages building custom hooks, and this trend reminds me of npm’s early days.

A deadly simple React bindings library for Redux with Hooks API

Fri, 16 Nov 2018 12:00:00 +0900

There is a follow-up article which describes the implementation details of this library. Please visit here.

Redux is one of the popular libraries for React. Although Redux itself is not tied to React, it’s often used with the official bindings react-redux that allows to connect Redux state to any React components.

In this article, we propose another bindings library to combine React and Redux. This library tries to be simple and easy for beginners. As of writing, this is still an experimental project and feedbacks are welcome.

React Hooks Tutorial on pure useReducer + useContext for global state like Redux and comparison with react-hooks-global-state

Fri, 09 Nov 2018 12:00:00 +0900

In this article, I will first explain minimal code to implement global state with useReducer and useContext which are called “hooks” that will be available in React 16.7. I will then compare it with react-hooks-global-state which is a tiny library that I’ve been developing for global state management primarily for small applications.

Note: Global state is convenient for sharing values among components far apart in the component tree, but it shouldn’t be abused because it would limit the reusability. Consider if values could be simply passed as props down the component tree.

React global state by Context API for TypeScript

Thu, 08 Nov 2018 12:00:00 +0900

Note: this post has nothing to do with React Hooks API.

In my previous post, I introduced a library called react-context-global-state. After a while, I have better knowlege of TypeScript (yes, I’m a beginner!), and come up with fairly good type definitions. I just released a new version.

https://www.npmjs.com/package/react-context-global-state

Example code in TypeScript

Let me breifly show how the code looks like in TypeScript.

In a file named state.ts, we define a global state and export function components. The State type is also exported.

Redux middleware compatible React Hooks library for easy global state management

Wed, 07 Nov 2018 12:00:00 +0900

The library

I’ve been developing a library to make use of React Hooks API. The library is for global state mangement with the aim to use it instead of Redux, especially for smaller applications. See the repository for more information and the source code.

https://github.com/dai-shi/react-hooks-global-state

Please also check out my previous posts [1] [2].

Support for Redux middleware

Originally, the library was extending useState for global state. Later, reducer is supported. Now, middleware support is added. The following is the code snippet from the working example to illustrate how it can be used.

An alternative to React Redux by React Hooks API (For both JavaScript and TypeScript)

Sun, 04 Nov 2018 12:00:00 +0900

Motivation

Everyone is excited about the new React Hooks API. So am I. Having been thinking how to manage global state, the Hooks API seems promising. By the way, I like Redux a lot, but I don’t like react-redux a.k.a connect very much. It is too complicated for beginners to use it properly. For example, reselect / memoization is a hard concept to explain. My recommendation is to structure a global state so that mapStateToProps only needs to select a part of the state without any logic. If you are really free to structure a global state, you can make it so that it selects direct properties of the state, which means “one-depth”.

TypeScript-aware React hooks for global state

Sun, 28 Oct 2018 12:00:00 +0900

React Hooks API is a new proposal for React v16.7. It enables writing all components as functions with full functionality. You can develop “custom hooks” to add a new functionality. Although it’s not released yet, I would like to introduce a new library to support global state. Note that it’s still an experiment.

The library

It’s called “react-hooks-global-state” and is available in npm. Please also checkout the GitHub repository.

https://github.com/dai-shi/react-hooks-global-state

Clean Expo (React Native) + React Apollo (GraphQL) + TypeScript boilerplate

Sat, 20 Oct 2018 12:00:00 +0900

Motivation

Have you heard of React Native, GraphQL and TypeScript? I’m looking for a easy and nice tech stack to develop mobile apps. These three may fit nicely for developing mobile apps for beginners up to intermediates. More precisely, Expo is chosen for building React Native development environment, and React Apollo is for GraphQL. These libraries comes with type annotations, which allow us to code in TypeScript. By “Clean” I mean not only the boilerplate is minimalistic, but also we don’t allow “any” types.

React global state by Context API

Fri, 05 Oct 2018 12:00:00 +0900

I had been trying to find a way to use React without using class. Redux is one solution to achieve this. Although I love the idea of writing everthing in pure functions, Redux is sometimes not suitable for small apps. React v16.3 introduced new Context API officially. Since then, several ideas were proposed to use it for managing global state. So far, I wasn’t able to find something I really liked, hence I made a new one.