UseState

State di Next.js itu data yang bisa berubah dan mempengaruhi tampilan UI. State ini bisa disimpan di client (browser) atau di server (backend) tergantung kebutuhan.

• Client State (State di Frontend)

Client State itu state yang ada di browser dan berubah tanpa reload halaman. Dan State Management ini hanyak bisa di gunakan secara lokal aja. Biasanya dipakai buat:

1. Menyimpan input user
2. Mengatur UI (misal: modal terbuka/tutup, tema dark/light)
3. Menyimpan data sementara (misal: daftar barang di keranjang belanja)

📌Contoh Client State

"use client"; // Wajib kalau pakai useState

import { useState } from "react";

const Home = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}
export default Home

• Context API

Context API hampir sama seperti Client State. Namun perbedaanya adalah Context API ini hanya di gunakan untuk menyimpan State yang ringan, dan ketika menggunakan Context API sebagai State Management state tersebut bisa di gunakan secara global / yang bisa dipakai banyak komponen.

Jika memang penggunakan Context API yang lebih kompleks dapat menggunakan Zustand / Redux yaitu Library Tambahan yang dapat digunakan.

📌Contoh Context API State Management

import { createContext, useContext, useState } from "react";

// 1. Bikin Context
const ThemeContext = createContext();

// 2. Provider (Bungkus App dengan ini)
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. Custom Hook biar gampang dipakai
export function useTheme() {
  return useContext(ThemeContext);
}

📌Contoh penggunaan dalam komponen

import { useTheme } from "@/context/ThemeContext";

export default function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Switch to {theme === "light" ? "Dark" : "Light"} Mode
    </button>
  );
}