React Best Practices Part I
Published: 2024-01-23 11:55:54

Pada blog ini, kita akan membahas topik penting tentang konvensi penamaan dan bagaimana konvensi ini menjadi dasar dari kode yang bersih dan mudah dipelihara di React.

## Konvensi Penamaan di React

Konvensi penamaan memainkan peran penting dalam meningkatkan keterbacaan kode, pemeliharaan, organisasi, dan komunikasi dalam pengembangan perangkat lunak. Dalam konteks React, kita akan menjelajahi beberapa konvensi penamaan yang umum digunakan.

### Pascal Case
Pascal Case adalah konvensi penamaan di mana huruf pertama setiap kata diawali dengan huruf kapital, dan tidak ada spasi atau tanda baca di antara kata-kata tersebut. Dalam React, Pascal Case dapat diterapkan pada:

1. **Komponen React**
    ```jsx
    const Todo = () => {
       //...
    }
    ```
2. **Nama Kelas CSS**
    ```css
    .Todo {
       /*...*/
    }
    ```
3. **Enumerasi**
    ```jsx
    const RequestType = {
       GET: 'GET',
       POST: 'POST',
       //...
    }
    ```

### Camel Case
Camel Case adalah konvensi penamaan di mana setiap kata atau frasa diawali dengan huruf kapital kecuali kata pertama, yang dimulai dengan huruf kecil. Dalam React, Camel Case dapat digunakan untuk:

1. **Nama Variabel**
    ```jsx
    const userName = "sathishskdev";
    ```
2. **Nama Fungsi**
    ```jsx
    const getFullName = (firstName, lastName) => {
        return `${firstName} ${lastName}`;
    }
    ```
3. **Properti Objek**
    ```jsx
    const user = {
      userName: "sathishskdev",
      firstName: "Sathish",
      lastName: "Kumar"
    }
    ```
4. **Nama Kelas CSS Modul**
    ```css
    .headerContainer {
        display: "flex";
    }
    ```
5. **Custom Hooks**
    ```jsx
    const useTodo = () => {
      //...
    }
    ```
6. **Komponen Higher Order**
    ```jsx
    const withTimer = () => {
      //...
    }
    ```

### Kebab Case
Kebab Case adalah konvensi penamaan di mana kata-kata digabungkan dengan huruf kecil dan dipisahkan oleh tanda hubung ("-"). Dalam React, Kebab Case dapat diterapkan pada:

1. **Nama Kelas CSS**
    ```css
    .header-container {
        display: "flex";
    }
    ```
2. **Nama Folder**
    ```
    src
      todo-list // Nama folder
          TodoList.jsx
          TodoList.module.scss
      todo-item // Nama folder
          TodoItem.jsx
    ```

### SCREAMING_SNAKE_CASE
SCREAMING_SNAKE_CASE adalah konvensi penamaan di mana kata-kata atau frasa menggunakan huruf kapital, dengan kata-kata dipisahkan oleh garis bawah ("_"). Dalam React, SCREAMING_SNAKE_CASE dapat diterapkan pada:

1. **Konstanta**
    ```jsx
    const BASE_PATH = "https://domain.services/api";
    ```
2. **Properti Enumerasi**
    ```jsx
    const RequestType = {
      GET: 'GET',
      POST: 'POST',
      PUT: 'PUT',
      DELETE: 'DELETE',
    };
    ```
3. **Variabel Global**
    ```jsx
    const ENVIRONMENT = 'PRODUCTION';
    const PI = 3.14159;
    ```

### Konvensi Penamaan Komponen Higher-Order
Beberapa praktik terbaik untuk memberi nama Komponen Higher-Order (HOC) melibatkan penggunaan awalan "with" diikuti oleh fungsionalitas atau tujuan HOC, serta menyertakan nama komponen asli dalam nama HOC.

```jsx
const withFilter = () => {
   //...
}

// Penggunaan HOC
const Filter = withFilter(/*Nama Komponen*/);
```

### Konvensi Penamaan Custom Hooks
Praktik terbaik untuk memberi nama Custom Hooks melibatkan penggunaan awalan "use" diikuti oleh fungsionalitas atau tujuan Custom Hooks, serta menyertakan perilaku hook sebagai sufiks.

```jsx
const useTimer = (initialTime) => {
  // ... implementasi hook
};

// Penggunaan custom hook
const { time, start, stop, reset } = useTimer(60);
```

### Gunakan Nama yang Bermakna dan Deskriptif
Penting untuk menghindari penggunaan nama yang generik atau tidak jelas. Pilih nama yang lebih deskriptif dan spesifik untuk meningkatkan kejelasan dan pemeliharaan kode.

Contoh:
```jsx
const ProductDetails = () => {
  const productInfo = fetchProductInfo();
  const addProductToCart = () => {
    // Menambahkan produk ke keranjang belanja
  };
  //...
}
```

### Pemilihan Nama Tunggal atau Jamak
Keputusan untuk menggunakan nama tunggal atau jamak untuk komponen, fungsi, dan variabel dapat berdampak pada kejelasan kode.

Contoh:
```jsx
const fetchConversation = () => {
  // Mengambil satu percakapan.
}

const fetchConversations = () => {
  // Mengambil beberapa percakapan.
}

// Gunakan nama tunggal untuk satu percakapan
const conversation = { /*Detail Percakapan*/ }

// Gunakan nama jamak untuk beberapa percakapan
const conversations = [
  { /*Detail Percakapan*/ }, 
  { /*Detail Percakapan*/ }
]
```

### Hindari Penggunaan Singkatan Berlebihan
Hindari singkatan berlebihan dalam kode untuk meningkatkan kejelasan. Gunakan nama objek dan properti yang deskriptif.

Contoh:
```jsx
// Singkatan berlebihan
const selUsr = {
  usrId: '1',
  usrNm: 'Sathish Kumar',
  usrEmail: 'sathish@domain.com',
};

// Gunakan nama objek dan properti yang deskriptif
const selectedUser = {
  userId: 1,
  userName: 'Sathish Kumar',
  userEmail: 'sathish@domain.com',
}
```

### Kesimpulan
Dengan mengikuti praktik-praktik terbaik konvensi penamaan di React, Anda akan menciptakan kode yang bersih, mudah dibaca, dan mudah dipelihara. Memilih nama yang

 bermakna dan deskriptif sangat penting untuk meningkatkan kejelasan kode dan kolaborasi antara pengembang.

Ingatlah untuk konsisten dalam penggunaan konvensi penamaan di seluruh proyek Anda, dan teruslah terhubung untuk pembahasan lebih lanjut tentang best practices di React. Selamat coding! 😊👩‍💻👨‍💻

## 🌐 Sumber

1. [20 React Best Practices: Tips for Optimizing Your Code](https://www.yourteaminindia.com/blog/react-best-practices)
2. [How to name your React Component: Conventions](https://medium.com/@smail.oubaalla/how-to-name-your-react-component-conventions-b8daf3abc574)
3. [React Hook Naming Conventions Best Practices and Guidelines](https://blog.stackademic.com/react-hook-naming-conventions-best-practices-and-guidelines-32ac80c1580e)
4. [Hanif](https://www.codehanif.com)