Tentang Loading State…

Invalidate the invalids

Loading (source)

Bagi kamu-kamu yang berkarir sebagai Frontend atau Full-stack(overflow) developer, handling loading states is a must, apalagi ketika berhadapan dengan async operations. Dari beberapa aplikasi yang pernah saya kerjakan, saya menemukan adanya kesamaan dalam penanganan async operations seperti ini:

Dialah si 3 serangkai isLoading, isLoaded, dan error. Di level component, kita biasa menggunakan mereka dengan

render() {
  const { isLoading, error } = this.props;
  if (isLoading) return <SpinnerLoading />
  if (error) return <ErrorMessage />
  return <SomeComponent />
}

Kalo jalan sih jalan. Tapi menurut hemat saya, ada satu masalah desain yang kurang tepat di sini.

Invalid States

Kalau kita perhatikan satu per satu ketiga serangkai di atas, masing-masing punya rule-nya sendiri-sendiri:

1. Jika kita ingin mengekspresikan keadaan sedang loading, maka isLoading harus true, sedangkan isLoaded dan error haruslah false.
2. Jika kita ingin mengekspresikan keadaan dimana proses fetching data-nya berhasil, maka isLoaded harus true, sedangkanisLoading dan error haruslah false.
3. Jika kita ingin mengekspresikan keadaan dimana terjadi error ketika fetch data, maka error harus diisi dengan error msg, sedangkan isLoading dan isLoaded haruslah false.

Pendekatan seperti ini dirasa kurang sreg karena membuka peluang kepada terjadinya invalid states. Maksudnya apa? Mari coba menjawab pertanyaan berikut:

Jika isLoading dan isLoaded keduanya saya set dengan true, state apa yang kira-kira sedang saya coba representasikan?

Jawabannya: ndak ada. Karena secara intuitif, tidak mungkin kita bilang si anak sudah lahir sementara sang ibu masih mengandung. Inilah yang kita sebut dengan Invalid State.

Let’s invalidate the invalid ones

Solusinya sederhana, dengan mengekspresikannya langsung.

more expressive

Bagi pengguna Typescript, bisa menggunakan Enumeration:

export enum AsyncState { fetching, success, error }

dan sisanya sama seperti gist di atas.

Dengan cara seperti ini, kita tidak perlu lagi mengecek ketiga state tersebut hanya untuk memahami dimana kita berada. Kita tidak perlu lagi mengecek isLoaded dan error hanya untuk memahami bahwa isLoading bernilai true. Cukup dengan melihat AsyncState.fetching kita sudah paham. Dan tentunya, kita tidak lagi membuka peluang terhadap lahirnya state lain di luar ketiga state tersebut (loading, success, error).

“Intellectuals solve problems, geniuses prevent them”

— Albert Einstein

Semoga bermanfaat~