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.

https://webassembly.org/

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

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.

https://reactjs.org/docs/context.html

https://reactjs.org/docs/hooks-intro.html

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. This can be helpful for testing components in isolation without wrapping them. Note: passing undefined as a Provider value does not cause consuming components to use defaultValue.

... 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. Technically, we can use it to cancel promises, and it would be nice to have an easy way to handle abortable async functions. In the React world, we are expecting the Hooks API soon. I’ve started a project to implement custom hooks for abortable async functions.

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. However, what if we need to call OAuth provider to get an accessToken? Surely, we could run curl to get a token, copy it in the terminal and paste it in the browser. It should be much easier if we could simply sign in in the browser.

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.

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. As is noted JavaScript doesn’t have cancellation mechanism, but DOM has it. It’s called AbortController. It’s only supported in recent browsers, but polyfills should help for old browsers and Node.js.

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. It’s just safer to do global install unless you know the issues that could arise.

... Read More

Introduction

React Hooks are a new feature coming in React 16.7. It allows us to write stateful function components that were impossible before without class components. The official docs are must-read, so check them out if you haven’t.

https://reactjs.org/docs/hooks-intro.html

Besides stateful function components, this new feature allow us to build a custom hook to share logic between components. This has been possible with High-order Components (HoCs), and although there’s technically no difference what hooks can achieve, hooks simplify it a lot and reduce so called “wrapper hell”. This simplicity encourages building custom hooks, and this trend reminds me of npm’s early days.

There is a follow-up article which describes the implementation details of this library. Please visit here.

Redux is one of the popular libraries for React. Although Redux itself is not tied to React, it’s often used with the official bindings react-redux that allows to connect Redux state to any React components.

In this article, we propose another bindings library to combine React and Redux. This library tries to be simple and easy for beginners. As of writing, this is still an experimental project and feedbacks are welcome.

In this article, I will first explain minimal code to implement global state with useReducer and useContext which are called “hooks” that will be available in React 16.7. I will then compare it with react-hooks-global-state which is a tiny library that I’ve been developing for global state management primarily for small applications.

Note: Global state is convenient for sharing values among components far apart in the component tree, but it shouldn’t be abused because it would limit the reusability. Consider if values could be simply passed as props down the component tree.