Hey, welcome to my new post 👋🏼

kali ini saya akan membahas tentang Facade Design Pattern. Latar belakang ide design pattern ini adalah untuk memudahkan dan membuat kodingan kita menjadi lebih simpel dan bisa diubah kembali dimasa depan.

Salah satu contoh simpel Facade Design Pattern yang sering kita temui adalah penggunaan Fetch API di React aplikasi.

Biasanya kita langsung menggunakan Fetch API di Presentation Logic. Sebetulnya Fetch API ini termasuk Business Logic yang semestinya tidak harus dicantumkan dalam Presentation Logic.

Dan dengan menggunakan Design Pattern ini, kita tidak perlu repot lagi untuk menulis ulang setiap Fetch API jika kita ingin mendapatkan data dari APIs dan membuat Presentation Logic semakin simpel dan clean code

Custom Hooks salah satu implementasi Facade Design Pattern

Pernah dengar developer sering menggunakan Custom Hooks? Biasanya developer menggunakan Custom Hooks agar Presentation Logic nya terlihat simpel dan clean code. Dan ini adalah salah satu favorit saya setiap kali berurusan dengan beberapa subsystem yang kompleks. Contohnya useForm, useFetch dan lainnya.

Let's jump to the code!

Bagi kalian yang belum paham dengan React Hooks, silahkan belajar terlebih dahulu tema React Hooks: useState, useEffect

// useFetch.js
import { useEffect, useState } from 'react';

export const useFetch = (url, params = {}) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

  useEffect(() => {
    setLoading(true);
    setError(false);

    let abortController = new AbortController();

    const queryString = Object.entries(params).map(param => {
      return `${param[0]}=${param[1]}`;
    }).join('&')

    fetch(`${url}?${queryString}`, {
      method: "GET",
      headers: { "Content-Type": "application/json" }
    })
      .then(res => res.json())
      .then(data => {
        setData(data)
        setLoading(false)
      })
      .catch(e => {
        setError(true)
        console.error(e.message)
      })

    return () => abortController.abort()
  }, [])

  return { loading, data, error }
}

sejatinya custom Hooks itu cuma beberapa kumpulan React Hooks yang super gak clean code. Disini kita bisa paham useState men-set Loading dan Error, begitu pula ketika kita men-set hasil data dari API.

FYI: variable queryString ini adalah implementasi Object {} ke array dengan Map() dan Join() method agar di url endpoint bisa menjadi seperti ini: yourURL/yourEndpoint?param=1&param=post

Dengan menggunakan Custom Hooks contoh useFetch() ini bisa jadi function yang sangat reusable kedepannya jika aplikasi kita butuh banyak data dari APIs.

Dan di akhir function useFetch() kita harus return object { loading, data, error } sebagai hasil function dari useFetch() untuk digunakan di presentation logic

export const useFetch = (url, params = {}) => {

   return { 
      loading: true or false, 
      data: hasil fetch API, 
      error: true or false 
   }
}

Selanjutnya gimana implementasi custom hooks di presentation logic?

// app.js
import React from "react";
import ReactDOM from "react-dom";
import { useFetch } from './useFetch';

import "./styles.css";

function App() {
  const { loading, data, error } = useFetch('https://jsonplaceholder.typicode.com/posts', {
    userId: Math.floor(Math.random() * 6) + 1  
  })

  if(loading) return <h1>Loading..</h1>
  if(error) return <h1>Error..</h1>

  return (
    <div className="App">
      {data.map(post => {
        return (
          <li key={post.id}>{post.name}</li>
        )
      })}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Penggunaannya bisa menggunakan feature ES6 Object Destruction, penggunaan useFetch() ini bisa menjadi 1 line code

import { useFetch } from './useFetch';

const { loading, data, error } = useFetch(url, params);

console.log(loading, data, error)

Sisanya kita tinggal melakukan render ke JSX component.

Demikian penjelasaan mengenai sedikit tentang Facade Design Pattern dan cara menggunakannya dengan Custom Hooks.

Cheers! Salam dari Leipzig, Germany 🍻