25. useRef trong React JS

useRef là một trong những React Hook cho phép bạn tạo một tham chiếu (reference) đến một thành phần trong DOM hoặc để lưu trữ giá trị không bị ảnh hưởng bởi việc render lại. Một trong những ứng dụng phổ biến của useRef là để truy cập các phần tử DOM hoặc thực hiện các tác vụ liên quan đến lifecycle của component. Dưới đây là một ví dụ về cách sử dụng useRef:

jsx

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null); // Khởi tạo một tham chiếu

  const handleClick = () => {
    // Truy cập và đặt trạng thái fokus cho phần tử input
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

export default FocusInput;

Trong ví dụ trên, chúng ta sử dụng useRef để tạo một tham chiếu (inputRef) đến phần tử input trong DOM. Khi người dùng nhấn nút “Focus Input”, hàm handleClick được gọi và sử dụng inputRef.current.focus() để đặt trạng thái fokus cho phần tử input.

Một ứng dụng khác của useRef là để lưu trữ giá trị không bị ảnh hưởng bởi việc render lại. Điều này có thể hữu ích trong việc lưu trữ các giá trị trạng thái trước và sau khi render để so sánh hoặc thực hiện các tác vụ khác.

jsx

import React, { useState, useEffect, useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  const prevCount = prevCountRef.current;

  return (
    <div>
      <p>Current Count: {count}</p>
      <p>Previous Count: {prevCount !== undefined ? prevCount : 'N/A'}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Trong ví dụ trên, chúng ta sử dụng useRef để lưu trữ giá trị trước của count. Trong useEffect, mỗi khi count thay đổi, chúng ta cập nhật giá trị trước bằng cách gán prevCountRef.current = count. Việc này cho phép chúng ta so sánh giá trị trước và sau mỗi lần render để hiển thị lịch sử thay đổi của count. Trên đây là useRef trong React JS.