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

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

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

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

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