2 Hooks Dasar React useState, useEffect

Hooks Dasar React useState, useEffect – React adalah sebuah perpustakaan JavaScript untuk membangun antarmuka pengguna yang dikembangkan oleh Facebook. Salah satu fitur utama dari React adalah kemampuannya untuk mengelola state dan props, atau properti, di dalam sebuah komponen. Sebelumnya, ini biasanya dilakukan menggunakan komponen berbasis kelas, yang memerlukan penggunaan kata kunci this dan metode lifecycle. Namun, dengan diintroduksinya React hooks pada versi 16.8, sekarang sudah memungkinkan untuk menggunakan komponen fungsional untuk mengelola state dan props juga.

Hooks adalah fungsi yang memungkinkan Anda untuk menggunakan state dan fitur React lainnya di dalam komponen fungsional. Mereka diperkenalkan untuk menyelesaikan masalah bagaimana mengelola state dan efek samping di komponen fungsional, yang tidak dapat menggunakan metode lifecycle seperti komponen berbasis kelas. Dengan hooks, sekarang sudah memungkinkan untuk menggunakan komponen fungsional untuk hampir semua jenis komponen, termasuk yang sebelumnya memerlukan kelas.

Hooks useState

Ada beberapa hooks dasar yang sering digunakan dalam aplikasi React. Hooks yang paling sering digunakan adalah useState hook, yang memungkinkan Anda untuk menambahkan state ke dalam komponen fungsional. Untuk menggunakan useState hook, Anda perlu mengimportnya dari perpustakaan react dan kemudian memanggilnya di dalam komponen fungsional Anda. Hook ini mengembalikan sebuah array dengan dua elemen: nilai state saat ini dan sebuah fungsi yang dapat digunakan untuk memperbarui state. Berikut ini adalah contoh bagaimana menggunakan useState hook:

import React, { useState } from 'react';
function Example() {
  // Deklarasikan sebuah variabel state baru, yang kita sebut "count"
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Anda telah mengklik {count} kali</p>
      <button onClick={() => setCount(count + 1)}>
        Klik saya
      </button>
    </div>
  );
}

Pada contoh ini, useState hook dipanggil dengan nilai state awal 0. Hook ini mengembalikan sebuah array dengan nilai state saat ini count.

Dan setCount adalah fungsi yang dapat digunakan untuk memperbarui state. Fungsi setCount dipanggil di dalam handler event onClick tombol, yang meningkatkan variabel state count sebesar 1 setiap kali tombol diklik.

Hooks useEffect

Hook lain yang dasar adalah useEffect hook, yang memungkinkan Anda untuk melakukan efek samping di dalam komponen fungsional. Efek samping adalah tindakan yang tidak langsung terkait dengan rendering dari komponen, seperti memanggil API atau mengatur listener event. useEffect hook dipanggil di dalam komponen fungsional, dan mengambil sebuah fungsi sebagai argumen. Fungsi ini dipanggil setelah komponen terrender dan setiap kali props atau state komponen berubah. Berikut ini adalah contoh bagaimana menggunakan useEffect hook:

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  // Mirip dengan componentDidMount dan componentDidUpdate:
  useEffect(() => {
    // Update judul dokumen menggunakan API browser
    document.title = `Anda telah mengklik ${count} kali`;
  });
  return (
    <div>
      <p>Anda telah mengklik {count} kali</p>
      <button onClick={() => setCount(count + 1)}>
        Klik saya
      </button>
    </div>
  );
}

Dalam contoh ini, useEffect hook dipanggil dengan sebuah fungsi yang mengupdate judul dokumen menggunakan API browser. Fungsi ini akan dipanggil setelah komponen terrender dan setiap kali nilai state count berubah.