Latest Posts

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
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. ... Read More
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 Reference They are trying best to explain new mind sets with analogies. That means it’s totally different from the usage with traditional React. ... Read More
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. ... Read More
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 ... Read More
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. ... Read More
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. ... Read More
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. ... Read More
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. ... Read More