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.

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.

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.

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.

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.

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

... Read More

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

... 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.

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.

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.