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

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

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

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

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