Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về useRef, một Hook trong ReactJS, cách sử dụng nó và một số ví dụ minh họa.

Khái niệm useRef

useRef là một Hook trong ReactJS, cho phép bạn tạo ra một "tham chiếu" đến một giá trị. Giá trị này có thể thay đổi theo thời gian mà không gây ra việc render lại component.

const refContainer = useRef(initialValue);

Trong đó, initialValue là giá trị khởi tạo cho ref. Giá trị của ref sẽ được lưu trong thuộc tính .current của nó.

Cách sử dụng useRef

useRef thường được sử dụng trong hai trường hợp chính:

1. Truy cập trực tiếp vào một DOM Element

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

export default TextInputWithFocusButton;

Trong ví dụ trên, chúng ta sử dụng useRef để "giữ" một tham chiếu đến input element. Khi người dùng nhấn vào button, chúng ta sử dụng tham chiếu này để đặt focus cho input.

2. Lưu trữ giá trị không gây ra render

useRef cũng có thể được sử dụng như một hộp để "giữ" một giá trị mà không gây ra việc render lại component khi giá trị đó thay đổi.

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

function Timer() {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      console.log('Timer is running');
    }, 1000);
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  return (
    <h1>Check the console log.</h1>
  );
}

export default Timer;

Trong ví dụ trên, chúng ta sử dụng useRef để lưu trữ id của hàm setInterval. Khi component unmount, chúng ta sử dụng id này để dừng hàm setInterval.

Hy vọng qua bài viết này, bạn đã hiểu rõ hơn về useRef và cách sử dụng nó trong ReactJS. Hãy tiếp tục thực hành để nắm vững kiến thức này!