Bereaksi useRefKait

useRefHook memungkinkan Anda untuk mempertahankan nilai di antara render .

Ini dapat digunakan untuk menyimpan nilai yang dapat diubah yang tidak menyebabkan rendering ulang saat diperbarui.

Ini dapat digunakan untuk mengakses elemen DOM secara langsung.

Tidak Menyebabkan Re-render

Jika kita mencoba menghitung berapa kali aplikasi kita merender menggunakan useStateHook, kita akan terjebak dalam infinite loop karena Hook ini sendiri menyebabkan rendering ulang.

Untuk menghindarinya, kita bisa menggunakan useRefHook.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

useRef()hanya mengembalikan satu item. Ini mengembalikan Obyek yang disebut current.

Saat kami menginisialisasi useRef, kami menetapkan nilai awal: useRef(0).

Jalankan ini di komputer Anda dan coba ketikkan input untuk melihat peningkatan jumlah render aplikasi.

Mengakses Elemen DOM

Secara umum, kami ingin membiarkan React menangani semua manipulasi DOM.

Tetapi ada beberapa contoh di mana useRefdapat digunakan tanpa menyebabkan masalah.

Di React, kita bisa menambahkan refatribut ke elemen untuk mengaksesnya langsung di DOM.

import { useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Melacak Perubahan Status

useRefHook juga dapat digunakan untuk melacak nilai status sebelumnya .

Ini karena kami dapat mempertahankan useRefnilai di antara render.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Kali ini kita menggunakan kombinasi useState, useEffect, dan useRefuntuk melacak keadaan sebelumnya.

Di useEffect, kami memperbarui nilai useRefsaat ini setiap kali inputValuediperbarui dengan memasukkan teks ke dalam bidang input.