Latest Posts

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