React.js
  • Roadmap belajar React.js
  • Tahap 1: Dasar-dasar JavaScript
    • Apa itu JavaScript dan kegunaannya
    • Sejarah dan perkembangan JavaScript
    • Apa itu Node.js dan hubungannya dengan JavaScript
    • Cara instal Node.js
    • Cara menjalankan JavaScript di Node.js
    • Variabel dalam JavaScript
    • Tipe data dalam JavaScript
    • Operator dalam JavaScript
    • Truly dan Falsy dalam JavaScript
    • Kondisional dalam JavaScript
    • Looping dalam JavaScript
    • Fungsi dalam JavaScript
    • Parameter dan Return Value dalam JavaScript
    • DOM di JavaScript dan Cara manipulasinya
    • Event Handling dalam JavaScript
    • Try, catch, dan finally dalam JavaScript
    • Callback dalam JavaScript
    • Promise dalam JavaScript
    • Async dan Await dalam JavaScript
  • Tahap 2: JavaScript Lanjutan
    • OOP dalam JavaScript
    • ES6
    • LocalStorage dalam JavaScript
    • FetchAPI dalam JavaScript
  • Tahap 3: Memulai dengan React.js
    • Apa itu React?
    • Konsep Virtual DOM
    • Apa itu JSX?
    • Langkah-langkah Setup Project React.js
    • Apa itu Komponen dalam React?
    • Apa itu Props dan State dalam React?
    • Apa itu Event Handling dalam React?
    • Apa itu Component Lifecycle dalam React?
    • Apa itu Hooks dalam React?
    • Apa itu Custom Hooks dalam React?
  • Tahap 4: React Lanjutan
    • Apa itu Context API dalam React?
    • Apa itu State Management (Redux)?
    • Apa itu Routing di React?
    • Apa itu Dynamic Routing, Private Routing, dan Nested Routing?
    • Cara menulis CSS di React
    • Cara Menggunakan Bootstrap di React
    • Cara Menggunakan Tailwind CSS di React
    • Cara Fetching data dari API di React
    • Cara Menampilkan data dinamis di React
    • Error handling dalam pengambilan data
    • Cara Testing komponen di React
    • End-to-end testing dengan Cypress atau Selenium
Powered by GitBook
On this page
  1. Tahap 3: Memulai dengan React.js

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

  • React Documentation - Introducing Hooks

  • React Documentation - Using the State Hook

  • React Documentation - Using the Effect Hook

  • MDN Web Docs - React Hooks

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 7 months ago