Image for post
Image for post
Photo by Pankaj Patel on Unsplash


In the last article, I discussed to use runtypes to connect static types and runtime check. The theory behind is runtypes has its own definition language, which can convert to a runtime check function and a static typescript type. By doing that we can remove the duplication across the two world.

Image for post
Image for post
Photo by isaac sloman on Unsplash

Typescript introduced type system into javascript, but it is only existed till compiled into javascript. When we run those compiled code in runtime, all the types are disappeared.

Happy path

Let’s give a example, check the following example:

type Person = {
name: string;
films: string[];
const fetchPerson = async (id: string): Promise<Person> => {
return await fetch(`${id}/`).then((res) =>
res.json() …

Image for post
Image for post
Photo by Sigmund on Unsplash

Quite often, when we develop npm packages, we want to test them as a consumer. In order to test, if you think you have to publish it, you are out. There are at least three ways to make your life a lot easier.

Test scenarios

Before we jump into the three method, let’s image the below scenarios we want to test:

  • Test locally: We want to test the package locally, because we can simulate the consumer locally.
  • Test within our team: My college want to test the package, as he/she is developing the consumer.
  • Test out of our team: Other team or our customers want to test the package. …

Image for post
Image for post
GraphQL codegen office logo

GraphQL is cool, it exposes the exact contract between frontend and backend in details.

Image for post
Image for post
Photo by Maksym Kaharlytskyi on Unsplash


When we stated to use useEffect and slowly put more and more logics in the effect, it is very easily end up with a long dependency list because of the eslint exhaustive-deps rule.

We provide an `exhaustive-deps` ESLint rule as a part of the `eslint-plugin-react-hooks` package. It warns when dependencies are specified incorrectly and suggests a fix.

For example, the original goal of the effect is to execute it when the A prop is changed. However, because we end up with other props in deps list like func1 prop and obj1 prop, the effect triggering logic became either A, func1 or obj1 changed. …

useEffect is the most widely used hook in React. It is handy and looks easy to use, but you must experience infinite loops or some unexpected result when using useEffect. In this article, I try to give you some tips to avoid those typical pitfalls when using it.

Tip #1 understand the mind concept of useEffect

The definition of useEffect is below:

function useEffect(effect: EffectCallback, deps?: DependencyList): void
type EffectCallback = () => void | (() => void | undefined)
type DependencyList = any[]

There are three factors in useEffect, effect, cleanup, and deps.
The key point is effect. We all know useEffect is to wrap side effects something like data fetching, DOM operations, etc. To be honest, when I read this at very first time, I didn’t quite understand, util I realised that action wrapped by useEffect actually will be executed after the normal render process. …

Graphql becomes more and more mainstream, and Graphql schemas first is becoming the recommended practice when starting a new project. It’s critical important to design a solid Graphql Schema which can be stable when facing future changes.

Tip #1: Mock resolvers before implementations

Supposing we are using Apollo Server, it has built-in mock feature which is surprising handy to use.
Let’s have a example of the following hello world…

Image for post
Image for post
Photo by Chris Brignola on Unsplash

Stranger Problem I met with unique index

I use nodejs to develop a simple app talking to `sql server` like below:

import Knex from ‘knex’
const knex = Knex(…)
// create the table
knex.schema.createTable(‘People’, function(t) {
t.unique([‘name’, ‘title’])

What the above did is create a table called `People` and create a unique index on `name` and `title`. Then I insert two records with different value. It is fine.

// insert two records with different values, it is fine
knex(‘People’).insert({name: ‘ron’, title: ‘Mr.’})
knex(‘People’).insert({name: ‘aaron’, title: ‘Dr.’})

Next try is to insert two records with same values, I will expect to see exception would happen. …


Ron Liu

Full Stack Dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store