useRef

useRef tạo ra một đối tượng ref với thuộc tính current với một giá trị khởi tạo. Đối tượng này tồn tại bền vững xuyên suốt vòng sống của component (không như các biến cục bộ).

const refContainer = useRef(initialValue)

Khác với state, đối tượng do useRef trả về có thể được sử dụng như 1 biến của lớp, việc thay đổi nó không làm component re-render. Thông thường, useRef còn được sử dụng chính để tham chiếu tới class component/DOM một cách dễ dàng.

Ví dụ đơn giản nhất về useRef là sử dụng nó để focus vào 1 input bất kì:

const TextInputWithFocusButton = () => {
  // Khởi tạo ref với giá trị ban đầu là null
  const inputEl = useRef(null)
  const onButtonClick = () => {
    /*
     * Thuộc tính current trỏ tới đối tượng input đã được mount
     * vì thế ta có thể sử dụng các phương thức mặc định của input trong JS
     */ 
    inputEl.current.focus();
  }

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>)
}

Hiện tại, ref chỉ có thể truy xuất vào class component/DOM. Funtional component bản chất không tạo ra instance nào nên không thể truy cập thông qua ref được. Tiếc thật đấy 😢.

ji