Apa itu Hooks dalam React?

Hooks adalah fitur baru dalam React 16.8 yang memungkinkan Anda menggunakan state dan fitur lain dari React tanpa perlu menulis komponen kelas. Hooks adalah fungsi yang memanfaatkan kemampuan React untuk mengelola state dan lifecycle pada komponen fungsional.

Beberapa Hooks yang Umum Digunakan

  1. useState: Memungkinkan komponen fungsional untuk memiliki state lokal.

  2. useEffect: Memungkinkan Anda melakukan efek samping dalam komponen fungsional.

  3. useContext: Memungkinkan Anda mengakses konteks di dalam komponen fungsional.

  4. useReducer: Alternatif untuk useState untuk manajemen state yang lebih kompleks.

  5. useRef: Memberi Anda referensi yang dapat disimpan di seluruh render.

Contoh Menggunakan useState dan useEffect

Berikut adalah contoh sederhana menggunakan useState dan useEffect hooks dalam komponen fungsional:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Hooks Example</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">

      function Counter() {
        // Menggunakan useState Hook
        const [count, setCount] = React.useState(0);

        // Menggunakan useEffect Hook
        React.useEffect(() => {
          // Efek samping: memperbarui judul dokumen
          document.title = `You clicked ${count} times`;
        }, [count]); // Hanya dijalankan ketika count berubah

        return (
          <div>
            <h1>Count: {count}</h1>
            <button onClick={() => setCount(count + 1)}>Increment</button>
          </div>
        );
      }

      ReactDOM.render(
        <Counter />,
        document.getElementById('root')
      );

    </script>
</body>
</html>

Penjelasan Kode

  1. useState:

    • const [count, setCount] = React.useState(0);

    • Menginisialisasi state count dengan nilai awal 0.

    • setCount adalah fungsi yang digunakan untuk memperbarui state count.

  2. useEffect:

    • React.useEffect(() => { ... }, [count]);

    • Hook ini dipanggil setelah render. Dalam contoh ini, hook ini memperbarui judul dokumen setiap kali count berubah.

    • Array kedua ([count]) adalah daftar dependensi. Efek hanya akan dijalankan ulang jika count berubah.

Keuntungan Menggunakan Hooks

  • Lebih Ringkas: Mengurangi boilerplate code yang diperlukan dalam komponen kelas.

  • Lebih Mudah Dimengerti: State dan efek samping lebih mudah dikelola dalam komponen fungsional.

  • Reusabilitas: Custom hooks memungkinkan Anda mengekstrak logika stateful ke dalam fungsi yang dapat digunakan kembali.

Sumber

Dengan hooks, Anda dapat mengelola state dan efek samping dalam komponen fungsional, membuat kode lebih bersih dan lebih mudah dipahami. Hooks juga mempromosikan reusabilitas logika stateful melalui custom hooks.

PreviousApa itu Component Lifecycle dalam React?NextApa itu Custom Hooks dalam React?

Last updated