useState, useEffect, useMemo, useRef - 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 empat 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.

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>
  );
};

Penjelasan:

• useState(0) artinya count diawali dengan nilai 0.
• setCount(count + 1) akan memperbarui state dan memicu re-render.

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>;
};

Penjelasan:

• Efek dijalankan setelah render.
• clearInterval(interval) digunakan untuk membersihkan efek saat komponen dihapus.

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>;
};

Penjelasan:

• useMemo memastikan bahwa perhitungan angka ** 2 hanya dilakukan jika angka berubah.
• Tanpa useMemo, setiap render akan menghitung ulang meskipun nilai tidak berubah.

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>
  );
};

Penjelasan:

• inputRef.current mengakses elemen input secara langsung.
• Tidak menyebabkan re-render saat nilainya berubah.

6. 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.

Dengan memahami keempat hook ini, kita bisa membangun aplikasi React yang lebih efisien dan optimal!