Panduan Lengkap React Hooks untuk Pemula

React Hooks diperkenalkan pada React 16.8 dan telah mengubah cara kita menulis komponen React. Hooks memungkinkan kita untuk menggunakan state dan fitur React lainnya tanpa perlu menulis kelas.

useState Hook

Hook paling dasar adalah useState, yang memungkinkan kita menambahkan state lokal ke komponen fungsi:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect Hook

useEffect memungkinkan kita melakukan efek samping dalam komponen fungsi:

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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Custom Hooks

Salah satu fitur terbaik dari Hooks adalah kemampuan untuk membuat Custom Hooks, yang memungkinkan kita mengekstrak logika komponen ke fungsi yang dapat digunakan kembali.

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    
    // Cleanup function
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  
  return width;
}

function MyComponent() {
  const width = useWindowWidth();
  return <div>Window width: {width}</div>;
}

Kesimpulan

React Hooks telah merevolusi cara kita menulis komponen React. Dengan hooks, kode menjadi lebih mudah dibaca, diuji, dan digunakan kembali. Sekarang kita dapat menggunakan semua fitur React tanpa perlu menulis komponen kelas.