useRef

useRef là một hook trong React dùng để giữ lại một giá trị tham chiếu (reference) qua các lần render mà không gây re-render khi giá trị đó thay đổi.

Hiểu đơn giản, nếu useState dùng để lưu dữ liệu và khiến component render lại khi thay đổi, thì useRef dùng để lưu dữ liệu, nhưng không làm render lại.

Ví dụ: lưu lại DOM element

import { useRef, useEffect } from "react";
 
function InputFocus() {
  const inputRef = useRef(null);
 
  useEffect(() => {
    inputRef.current.focus(); // focus vào input khi mount
  }, []);
 
  return <input ref={inputRef} placeholder="Focus me!" />;
}

Ở đây inputRef được trỏ trực tiếp đến phần tử input trong DOM.

Ví dụ: lưu biến không gây re-render

import { useRef, useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
  const renderCount = useRef(0);
 
  renderCount.current++;
 
  return (
    <div>
      <p>Count: {count}</p>
      <p>Render times: {renderCount.current}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

renderCount.current sẽ tăng mỗi lần component render, nhưng không kích hoạt render mới khi giá trị đó thay đổi.

Ví dụ: giữ giá trị cũ

import { useRef, useEffect, useState } from "react";
 
function PreviousValue() {
  const [count, setCount] = useState(0);
  const prevCount = useRef();
 
  useEffect(() => {
    prevCount.current = count;
  }, [count]);
 
  return (
    <p>
      Current: {count}, Previous: {prevCount.current}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </p>
  );
}

prevCount.current lưu lại giá trị count của lần render trước đó.