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.

When I saw there is an egghead course called Designing Graphql Schemas, I joined. After watching all episodes in an afternoon, I learned a lot how to design robust schema. Thanks Nik Graf.

In this article I share what I learned, but I still encourage you to watch the whole cause by yourself.

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