useRef pada React JS

 Apa itu useRef ?

useRef adalah hook React yang digunakan untuk menyimpan nilai yang tidak memicu re-render dan untuk mengakses elemen DOM secara langsung. Ini sangat berguna untuk menyimpan referensi yang tetap konsisten antar render dan tidak menyebabkan komponen melakukan re-render saat berubah.

Berikut contoh code penggunaan useRef

import React, { useRef } from "react";

export default function App() {

  // Membuat referensi untuk elemen input

  // useRef akan menyimpan referensi ke elemen DOM tanpa memicu re-render

  const inputRef = useRef();

  // Fungsi yang dijalankan saat tombol diklik

  const handleClick = () => {

    // Mengakses nilai input melalui .current.value

    // inputRef.current mengacu ke elemen <input>

    console.log("Log value reff, ", inputRef.current.value);

  };

  // Tampilan komponen

  return (

    <div>

      <input ref={inputRef} type="text" />

      <button onClick={handleClick}>Log Value</button>

    </div>

  );

}

hasilnya :