Membuat React Custom Hook yang Efektif dengan DRY Principle.

Menulis kode yang efisien dan terstruktur adalah tantangan besar dalam pengembangan aplikasi. Salah satunya adalah pembuatan custom hook untuk memecah fungsi ke dalam sebuah hook. Dimana, masih banyak yang kurang memperhatikan penulisan dan pengelompokan fungsi dari custom hook tersebut yang ujung — ujungnya kode yang ditulis masih WET. Penasaran? Baca sampai akhir :)

Perbedaan antara Senior dan Junior Developer

Menurut Rhey (2023): pada aspek teknis seorang junior hanya memprioritaskan kode fungsionalitas saja, beda halnya dengan senior yang menulis kode yang efisien dan terukur. Sehingga kode tersebut optimal, baik secara eksekusi maupun kemudahan kode tersebut dikembangkan dan mudah dibaca oleh pengembang yang lain.

Pengalaman dan jam terbang mereka sangat berbeda, junior memulai perjalanan belajar dan membangun keterampilan dasar. Sedangkan senior sudah memiliki tanggung jawab besar untuk memimpin sebuah proyek dan membimbing pengembang yang lain.

Prinsip dalam Menulis Baris Kode

Adexe (2021): beranggapan bahwa menjadi seorang pengembang haruslah bisa membuat dan memperhatikan setiap kode yang ditulis itu seefisien mungkin.

“It’s easy to write code. It’s challenging to write good code.”

Salah satu cara untuk menulis kode yang efisien yaitu mempelajari DRY principle. Apa itu prinsip DRY?

Dalam buku “The Pragmatic Programmer” yang ditulis oleh Andy Hunt dan Dave Thomas, memberi tahu kita prinsip DRY yaitu untuk menghindari duplikasi pada kode yang kita tulis.

Yad (2023): menjelaskan kepanjangan dari DRY yaitu “Don’t Repeat Your Self”, sedangkan ada prinsip sebaliknya yaitu WET (Write Everything Twice)

“Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.”

Yad (2023): juga menjelaskan keuntungan sebuah kode yang ditulis dengan prinsip DRY, yaitu kemudahan dibaca, usability (kode dapat digunakan beberapa kali), biaya (kode yang sedikit memakan waktu untuk debug maupun pemeliharaan sebuah kode).

Seperti apa sih penulisan kode yang DRY tersebut.

// WET

def validasiInfo(karyawan):
    if 'nama' not in karyawan:
        raise Exception('Data nama pada karyawan tidak ditemukan')
    if 'umur' not in karyawan:
        raise Exception('Data umur pada karyawan tidak ditemukan')
    if 'gaji' not in karyawan:
        raise Exception('Data gaji pada karyawan tidak ditemukan')

// DRY

def validasiInfo(karyawan):
    listInfo = ['nama', 'umur', 'karyawan']
    
    for info in listInfo:
        if info not in karyawan:
            raise Exception('Data {} pada karyawan tidak ditemukan'.format(info))

Dengan kode yang kedua akan mempermudah pengembang untuk melakukan perbaikan, dikarenakan satu loop dapat menangani 100 loop daripada 100 block kode yang menangani 1 loop.

Contoh lain:

// WET

function greetMorning(name) {
  return `Good morning, ${name}!`;
}

function greetAfternoon(name) {
  return `Good afternoon, ${name}!`;
}

function greetEvening(name) {
  return `Good evening, ${name}!`;
}

// DRY

function createGreeting(greeting, name) {
  return `Good ${greeting}, ${name}`
}

Adexe (2021): juga menekankan bahwa DRY principle tidak sebatas tentang kode dan logikanya saja, namun juga mencakup pada aspek fungsionalitas dan algoritma pada sebuah program.

Ricing Action (Problem)

// useHandleFilter.ts
import { useState } from "react";

const useHandleFilter = (show_data: string) => {
  const [showCategory, setShowCategory] = useState<boolean>(true);
  const [showData, setShowData] = useState<boolean>(false);

  const [data, setData] = useState<string | null>(show_data);
  const [category, setCategory] = useState<string | null>("all");

  const handleShowCategory = (show: boolean) => {
    setShowCategory(show);
  };

  const handleShowData = (show: boolean) => {
    setShowData(show);
  };

  const handleCategory = (category: string | null) => {
    setCategory(category);
  };

  const handleData = (show: string | null) => {
    setData(show);
  };

  return {
    showCategory,
    showData,
    data,
    category,
    handleShowCategory,
    handleShowData,
    handleCategory,
    handleData,
  };
};

export default useHandleFilter;

// FilterModal.tsx
import useHandleFilter from "@hook/useHandleFilter";

const {
    showCategory,
    showData,
    data,
    category,
    handleShowCategory,
    handleShowData,
    handleCategory,
    handleData,
  } = useHandleFilter(props.data_show);

Sebelumnya kita telah mempelajari cara senior dan junior untuk menulis sebuah kode, dan bagaimana penggunaan sebuah prinsip DRY. Kode tersebut memang tidak ada error dan dapat berjalan dengan semestinya. Tetapi banyak fungsi yang menjalankan kode yang sama, hal tersebutlah yang dihindari. Dimana akan mempengaruhi waktu pengembangan.

Denouement (Penyelesaian)

// useHandleFilter.ts
import { useState } from "react";

const useHandleFilter = (default_data: string) => {
  const [showData, setShowData] = useState<boolean>(false);

  const [data, setData] = useState<string | null>(default_data);

  const handleShowData = (show: boolean) => {
    setShowData(show);
  };

  const handleData = (show: string | null) => {
    setData(show);
  };

  return {
    showData,
    data,
    handleShowData,
    handleData,
  };
};

export default useHandleFilter;

// FilterModal.tsx
import useHandleFilter from "@hook/useHandleFilter";

const { 
  showData, 
  data, 
  handleShowData, 
  handleData 
} = useHandleFilter(props.data_show);

const {
  showData: showCategory,
  data: category,
  handleShowData: handleShowCategory,
  handleData: handleCategory,
} = useHandleFilter("all");

Epilog

Mengimplementasikan prinsip DRY (Don’t Repeat Yourself) dalam pengembangan perangkat lunak adalah langkah penting untuk menulis kode yang efisien, mudah dibaca, dan mudah dikelola. Dengan menghindari duplikasi kode, kita tidak hanya mempercepat waktu pengembangan tetapi juga mempermudah proses debugging dan pemeliharaan. Prinsip ini mendorong pengembang, baik junior maupun senior, untuk selalu mencari cara yang lebih elegan dan terstruktur dalam menangani logika aplikasi. Pada akhirnya, menulis kode yang DRY bukan hanya soal fungsionalitas, tetapi juga tentang menciptakan solusi yang lebih baik dan lebih tahan lama, yang dapat dengan mudah dipahami dan dioptimalkan oleh tim pengembang di masa depan.

Sumber

Adexe, Alifian. (2021). 7 Prinsip Dasar Seorang Programmer. anbidev.com. https://www.anbidev.com/prinsip-dasar-programmer/

Rhey, Jeanicka. (2023). How To Differentiate Junior and Senior Developers. developernation.net. https://www.developernation.net/blog/how-to-differentiate-junior-and-senior-developers/#:~:text=Junior%20developers%20prioritize%20functional%20code%2C%20often%20lacking%20comprehensive,however%2C%20focus%20on%20crafting%20efficient%20and%20scalable%20code.

Yad, Adir. (2023). DRY vs WET Code: Are You Coding Smart or Hard?. adiryad.com. https://adiryad.com/article/dry-vs-wet-code-are-you-coding-smart-or-hard