Next.js
Hooks

Hooks

Apa itu Hooks

Hooks adalah fitur dalam Next.js yang memungkinkan useState (penggunaan state), useEffect (efek samping), dan fungsi lainnya dalam komponen fungsional. Dengan Hooks, pengembang dapat mengelola keadaan aplikasi dan berinteraksi dengan siklus hidup komponen secara lebih mudah dan efektif.

useState

useState adalah sebuah Hooks dalam Next.js yang digunakan untuk mengelola state lokal dalam komponen fungsional. Fungsinya adalah untuk menyimpan nilai dan memperbarui nilai tersebut saat ada perubahan. Penggunaan useState diawali dengan mendeklarasikan variabel state dan fungsi untuk memperbarui nilai state, lalu menggunakan nilai tersebut dalam komponen fungsional. Ini memungkinkan pengembang untuk membuat komponen yang lebih dinamis dan interaktif tanpa perlu menggunakan kelas komponen.

Cara Penggunaan useState

Berikut adalah contoh cara penggunaan useState:

import { useState } from "react";
 
export default function ContohKomponen() {
  // Mendeklarasikan state menggunakan useState
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Kamu telah mengklik tombol sebanyak {count} kali</p>
      {/* Memperbarui state ketika tombol diklik */}
      <button onClick={() => setCount(count + 1)}>Klik saya</button>
    </div>
  );
}

Dalam contoh di atas, useState digunakan untuk mendeklarasikan variabel count yang menyimpan nilai state awalnya adalah 0. Fungsi setCount digunakan untuk memperbarui nilai count. Saat tombol diklik, nilai count akan diperbarui dengan nilai sebelumnya ditambah 1. Dengan demikian, setiap kali tombol diklik, nilai count akan bertambah dan komponen akan melakukan rerendering untuk menampilkan nilai count yang baru.

useEffect

useEffect adalah hooks dalam Next.js yang digunakan untuk melakukan efek samping dalam komponen fungsional. Efek samping tersebut dapat meliputi pembaruan data, berlangganan data, atau membersihkan sumber daya saat komponen dimuat, diperbarui, atau dihapus dari DOM.

Cara Penggunaan useEffect

Berikut adalah contoh cara penggunaan useEffect:

import { useState, useEffect } from "react";
 
export default function ContohKomponen() {
  const [data, setData] = useState(null);
 
  // Contoh penggunaan useEffect untuk memuat data dari server saat komponen dimuat
  useEffect(() => {
    // Fungsi untuk memuat data dari server
    async function fetchData() {
      const response = await fetch("https://example.com/data");
      const result = await response.json();
      setData(result);
    }
 
    // Memanggil fungsi fetchData saat komponen dimuat
    fetchData();
 
    // Membersihkan efek (opsional)
    return () => {
      // Logika pembersihan jika diperlukan
    };
  }, []); // [] menandakan bahwa efek ini hanya dijalankan saat komponen pertama kali dimuat
 
  return (
    <div>
      {data ? <p>Data yang dimuat: {data}</p> : <p>Sedang memuat data...</p>}
    </div>
  );
}

Dalam contoh di atas, useEffect digunakan untuk memuat data dari server saat komponen dimuat. Fungsi fetchData dijalankan dalam efek tersebut, dan data yang diperoleh dari server disimpan menggunakan setData. useEffect juga dapat memiliki logika untuk membersihkan efek, yang dapat digunakan untuk melakukan pembersihan seperti membatalkan langganan atau membersihkan sumber daya ketika komponen dihapus dari DOM.

useContext

useContext adalah hooks dalam Next.js yang digunakan untuk mengakses nilai dari sebuah konteks di dalam komponen fungsional. Konteks digunakan untuk membagikan data ke seluruh pohon komponen dalam aplikasi React tanpa harus melewatkan prop secara manual dari komponen ke komponen.

Cara Penggunaan useContext

Berikut adalah contoh cara penggunaan useContext:

Misalkan kita memiliki konteks yang menyimpan tema aplikasi.

themeContext.js
import { createContext, useContext, useState } from "react";
 
// Membuat konteks baru
const ThemeContext = createContext();
 
// Membuat provider untuk konteks
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
 
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
 
// Hook untuk mengakses nilai konteks
export function useTheme() {
  return useContext(ThemeContext);
}

Kemudian, kita dapat menggunakan konteks tersebut di dalam komponen fungsional:

ContohKomponen.jsx
import { useTheme } from "./themeContext";
 
export const ContohKomponen = () => {
  const { theme, setTheme } = useTheme();
 
  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };
 
  return (
    <div>
      <p>Tema saat ini: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};
LinkRouting