useContext: Biar Props Nggak Muter-muter - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Kenalan dengan Hook-Hook Ajaib di React

Saat membangun aplikasi React, kita sering menemui situasi di mana kita perlu menyimpan state, menangani efek samping, mengoptimalkan perhitungan, atau menyimpan referensi ke elemen DOM. Untungnya, React punya lima hook keren yang bisa membantu kita:

• useState → Untuk mengelola state di functional component.
• useEffect → Untuk menangani efek samping seperti fetching data.
• useMemo → Untuk mengoptimalkan perhitungan agar tidak dieksekusi berulang kali.
• useRef → Untuk menyimpan referensi elemen DOM atau nilai yang tidak memicu re-render.
• useContext → Untuk berbagi data antar komponen tanpa harus terus menerus meneruskan props.

Mari kita bahas satu per satu!

2. useState: Pegangannya State

Hook useState digunakan untuk menyimpan nilai yang bisa berubah seiring waktu.

import { useState } from "react";

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

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

3. useEffect: Reaksi Setelah Render

Hook useEffect digunakan untuk menangani efek samping seperti memanggil API atau mengatur event listener.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <p>Waktu: {count} detik</p>;
};

4. useMemo: Supaya Nggak Hitung Ulang Terus

Hook useMemo digunakan untuk menghindari perhitungan yang mahal dilakukan setiap render.

import { useState, useMemo } from "react";

const HitungPangkat = ({ angka }) => {
  const hasil = useMemo(() => {
    console.log("Menghitung pangkat...");
    return angka ** 2;
  }, [angka]);

  return <p>Hasil: {hasil}</p>;
};

5. useRef: Pegangan ke DOM atau Variabel Persisten

Hook useRef bisa digunakan untuk menyimpan referensi elemen DOM atau nilai yang tidak memicu re-render.

import { useRef } from "react";

const FokusInput = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Fokus ke Input</button>
    </div>
  );
};

6. useContext: Biar Props Nggak Muter-muter

Kadang saat kita ingin mengirim data ke banyak komponen, kita harus terus-menerus meneruskan props dari satu komponen ke komponen lain. Ini disebut prop drilling, dan bisa bikin kode jadi ribet. Untuk menghindari ini, kita bisa pakai useContext.

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

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const ThemeSwitcher = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <div>
      <p>Mode: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>Ganti Tema</button>
    </div>
  );
};

const App = () => (
  <ThemeProvider>
    <ThemeSwitcher />
  </ThemeProvider>
);

Penjelasan:

• createContext() membuat konteks global untuk tema.
• ThemeProvider menyediakan nilai tema agar bisa diakses di seluruh aplikasi.
• useContext(ThemeContext) memungkinkan komponen ThemeSwitcher mengakses tema tanpa harus menerima props dari App.

7. Kesimpulan

 useState → Untuk menyimpan dan mengubah state. useEffect → Untuk menjalankan efek samping seperti fetching data.  useMemo → Untuk mengoptimalkan perhitungan agar tidak dieksekusi berulang kali.  useRef → Untuk menyimpan referensi ke elemen DOM atau nilai yang ingin dipertahankan tanpa re-render.  useContext → Untuk berbagi data antar komponen tanpa harus meneruskan props secara manual.

Dengan memahami kelima hook ini, kita bisa membangun aplikasi React yang lebih efisien dan mudah dipelihara!