useRef hook có những công dụng gì?

useRef trả về mutable ref object với .current property không trigger re-render khi thay đổi.

Hai công dụng chính:

truy cập DOM element trực tiếp để focus/measure;
lưu giá trị mutable giữa renders mà không cần re-render

tsx

const FormExample = () => {
  // (1) DOM ref: focus input khi mount
  const inputRef = useRef<HTMLInputElement>(null)
  useEffect(() => { inputRef.current?.focus() }, [])

  // (2) mutable value: lưu timerId mà không trigger re-render
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
  const start = () => { timerRef.current = setInterval(tick, 1000) }
  const stop  = () => { if (timerRef.current) clearInterval(timerRef.current) }

  return <input ref={inputRef} placeholder="auto-focused" />
}

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React