ReactJS - Higher-Order Components: A Beginner's Guide

Hai sana, bakal ahli React! Hari ini, kita akan memulakan perjalanan menarik ke dunia Higher-Order Components (HOCs) dalam ReactJS. Jangan bimbang jika anda baru dalam programming - saya akan menjadi panduannya yang ramah, dan kita akan mengambil langkah demi langkah. Pada akhir panduan ini, anda akan dapat membuat HOCs seperti seorang profesional!

Apa Itu Higher-Order Components?

Sebelum kita mendalam, mari kita memahami apa Higher-Order Components adalah. Bayangkan anda di restoran burger. Anda memesan burger biasa, tetapi kemudian anda memutuskan untuk menambah keju, selada, dan bacon. Proses menambah ekstra ini ke burger anda adalah serupa dengan apa yang HOCs lakukan dalam React!

Dalam istilah React, Higher-Order Component adalah fungsi yang mengambil komponen dan mengembalikan komponen baru dengan beberapa fungtionalitas ditambah. Itu seperti saus khusus yang meningkatkan komponen yang sudah ada anda tanpa mengubah bahan utamanya.

Berikut adalah analogi sederhana:

// Ini seperti burger biasa kita
const PlainBurger = () => <div>?</div>;

// Ini adalah HOC kita, seperti menambah topping
const addCheese = (Burger) => {
return () => (
<div>
<Burger />
<span>?</span>
</div>
);
};

// Ini adalah burger kita yang diperkaya dengan keju!
const CheeseBurger = addCheese(PlainBurger);

Dalam contoh ini, addCheese adalah Higher-Order Component kita. Itu mengambil PlainBurger kita dan mengembalikan komponen baru dengan keju ditambah!

Cara Menggunakan Higher-Order Components

Sekarang kita memahami konsep, mari kita lihat bagaimana kita dapat menggunakan HOCs dalam konteks yang lebih praktis. Katakanlah kita memiliki beberapa komponen yang perlu mengambil data dari API. Daripada menulis logik pengambilan data yang sama di setiap komponen, kita dapat membuat HOC untuk menguruskan ini bagi kita.

Berikut adalah bagaimana kita mungkin melakukannya:

import React, { useState, useEffect } from 'react';

// Ini adalah HOC kita
function withDataFetching(WrappedComponent, dataSource) {
return function(props) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch(dataSource)
.then(response => response.json())
.then(result => {
setData(result);
setLoading(false);
})
.catch(e => {
setError(e);
setLoading(false);
});
}, []);

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;

return <WrappedComponent data={data} {...props} />;
}
}

// Ini adalah komponen sederhana yang akan menerima data yang diambil
function UserList({ data }) {
return (
<ul>
{data.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}

// Kita gunakan HOC kita untuk membuat komponen baru dengan kemampuan pengambilan data
const UserListWithData = withDataFetching(UserList, 'https://api.example.com/users');

// Sekarang kita dapat menggunakan UserListWithData dalam aplikasi kita!
function App() {
return (
<div>
<h1>Senarai Pengguna</h1>
<UserListWithData />
</div>
);
}

mari kitauraikan ini:

1. Kita tentukan HOC withDataFetching. Itu mengambil dua parameter: komponen yang kita ingin wrap (WrappedComponent) dan URL untuk mengambil data (dataSource).

2. Dalam withDataFetching, kita buat dan kembalikan komponen fungsi baru. Komponen ini menggunakan hooks React untuk mengelola state dan efek samping.

3. Kita menggunakan useState untuk mengelola state data, loading, dan error.

4. Kita menggunakan useEffect untuk mengambil data saat komponen dimuat. Setelah data diambil, kita memperbarui state sesuainya.

5. Bergantung pada state, kita menampilkan pesan loading, pesan kesalahan, atau merender WrappedComponent dengan data yang diambil.

6. Kita membuat komponen sederhana UserList yang diharapkan menerima data sebagai prop dan menampilkannya.

7. Kita menggunakan HOC kita untuk membuat komponen baru UserListWithData yang memiliki kemampuan pengambilan data.

8. Akhirnya, kita menggunakan UserListWithData dalam komponen App.

Men applies HOC Components

Sekarang kita telah melihat bagaimana membuat dan menggunakan HOC, mari kita lihat beberapa kasus penggunaan umum dan praktik terbaik.

HOC Autentikasi

Salah satu penggunaan umum HOC adalah untuk mengurus autentikasi. Berikut adalah contoh:

function withAuth(WrappedComponent) {
return function(props) {
const [isAuthenticated, setIsAuthenticated] = useState(false);

useEffect(() => {
// Periksa apakah pengguna sudah autentikasi
const token = localStorage.getItem('token');
setIsAuthenticated(!!token);
}, []);

if (!isAuthenticated) {
return <Redirect to="/login" />;
}

return <WrappedComponent {...props} />;
}
}

// Penggunaan
const ProtectedComponent = withAuth(SensitiveDataComponent);

HOC ini memeriksa apakah pengguna sudah autentikasi sebelum merender komponen yang diwrap. Jika belum, itu akan mengalihkan ke halaman login.

HOC Logging

Penggunaan lainnya adalah menambahkan logging ke komponen:

function withLogging(WrappedComponent) {
return function(props) {
useEffect(() => {
console.log(`Komponen ${WrappedComponent.name} dipasang`);
return () => console.log(`Komponen ${WrappedComponent.name} dilepas`);
}, []);

return <WrappedComponent {...props} />;
}
}

// Penggunaan
const LoggedComponent = withLogging(MyComponent);

HOC ini melog saat komponen dipasang dan dilepas, yang bisa sangat berguna untuk debugging.

Panduan dan Pertimbangan

Saat bekerja dengan HOCs, ingat tips berikut:

1. Jangan Ubah Komponen Asli: Selalu gabungkan komponen asli dengan fungtionalitas baru.
2. Lewati Props Tak Terkait: Pastikan untuk melewati semua props yang tak berkaitan melalui HOC.
3. Maksimalkan Komposabilitas: HOCs seharusnya dapat digabungkan dengan HOC lain.
4. Bungkus Nama Display untuk Debugging Mudah: Gunakan React.displayName untuk memberikan HOC nama yang jelas di React DevTools.

Berikut adalah tabel yang menggabungkan beberapa pola HOC umum:

Pola	Deskripsi	Contoh Kasus Penggunaan
Props Proxy	Manipulasi props	Menambah/mengubah props
Inheritance Inversion	Mengembangkan siklus hidup komponen	Menambahkan logging ke method siklus hidup
Render Highjacking	Mengendalikan output render	Rendering bersyarat
State Abstraction	Mengelola dan menyediakan state	Mengambil dan menyediakan data

Ingat, Higher-Order Components adalah alat kuat dalam peralatan React Anda, tetapi mereka tidak selalu solusi terbaik. Dengan pengenalan Hooks di React, beberapa kasus penggunaan HOCs dapat diselesaikan lebih indah dengan hooks khusus. Selalu pertimbangkan kebutuhan khusus aplikasi Anda saat memutuskan untuk menggunakan HOCs, hooks, atau pola lain. Dan itu saja, teman-teman! Anda telah mengambil langkah pertama ke dunia Higher-Order Components di React. Latih konsep ini, eksperimen dengan HOC Anda sendiri, dan segera Anda akan dapat mengkompos komponen seperti seorang maestro yang meng pimpin orkestra. Selamat coding!

Credits: Image by storyset