Tất tần tật về react hooks useRef() (P1)

Giới Thiệu

Quá quen thuộc với anh em công ty vì là 1 thư viện chính đang được sử dụng. React là thư viện javascript phổ biến được biết đến với câu nói ‘Một mét vuông 10 ông react’ :V. Vậy điều gì khiến nó được nhiều công ty và dev sử dụng vậy? Tính năng và thứ được cho là core của React chính là Virtual DOM (DOM ảo). Hiểu đơn giản thì đúng như cái tên của nó. Virtual DOM là 1 DOM ảo, React cập nhật các thay đổi trạng thái trong Virtual DOM trước và sau đó đồng bộ hóa với Real DOM. Bên cạnh đó, một trong những tính năng mạnh mẽ của React là các Hooks, cho phép bạn sử dụng state và các tính năng khác của React mà không cần viết các lớp. useRef là một trong những hook cơ bản của React, mang lại sự tiện lợi và sức mạnh khi làm việc với các tham chiếu (references) trong DOM cũng như trong các biến không yêu cầu render lại khi thay đổi.

useRef Là Gì?

useRef là một hook trong React, cho phép bạn tạo một đối tượng tham chiếu có thể thay đổi mà không làm cho component của bạn bị render lại khi giá trị của tham chiếu thay đổi. Nó thường được sử dụng để truy cập trực tiếp vào các phần tử DOM hoặc lưu trữ các giá trị mà không kích hoạt render lại.

Cú Pháp

const refContainer = useRef(initialValue);

• “initialValue" là giá trị ban đầu của đối tượng tham chiếu. Thường là null khi sử dụng với các phần tử DOM.

Các Trường Hợp Sử Dụng useRef

1. Truy Cập Phần Tử DOM

Một trong những trường hợp sử dụng phổ biến nhất của useRef là truy cập trực tiếp vào các phần tử DOM. Bạn có thể gắn một ref vào một phần tử DOM và sau đó truy cập nó thông qua thuộc tính current của ref.

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

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

export default InputFocus;

Trong ví dụ này, khi bạn nhấn nút “Focus Input”, input sẽ được focus nhờ inputRef.current.focus().

2. Lưu Trữ Giá Trị Không Cần Render Lại

useRef cũng có thể được sử dụng để lưu trữ các giá trị không cần render lại khi chúng thay đổi. Điều này hữu ích khi bạn cần lưu trữ các giá trị thay đổi liên tục nhưng không muốn kích hoạt render lại.

import React, { useRef, useState } from 'react';
function Timer() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  const incrementCount = () => {
    countRef.current += 1;
    setCount(countRef.current);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Timer;

Trong ví dụ này, countRef giữ giá trị count mà không kích hoạt render lại mỗi khi giá trị thay đổi, điều này giúp cải thiện hiệu suất.

3. Giữ Trạng Thái Trước Đó

useRef có thể được sử dụng để giữ trạng thái trước đó của một giá trị. Điều này rất hữu ích khi bạn cần so sánh giá trị hiện tại với giá trị trước đó.

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

function PreviousValue() {
  const [value, setValue] = useState('');
  const prevValueRef = useRef('');

  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>Current Value: {value}</p>
      <p>Previous Value: {prevValueRef.current}</p>
    </div>
  );
}

export default PreviousValue;

Trong ví dụ này, prevValueRef lưu giá trị trước đó của value, và được cập nhật mỗi khi value thay đổi.

Kết Luận

useRef là một hook mạnh mẽ và linh hoạt trong React, cho phép bạn truy cập trực tiếp vào các phần tử DOM, lưu trữ các giá trị không cần render lại, và giữ trạng thái trước đó. Bằng cách sử dụng useRef, bạn có thể làm cho các component của mình hiệu quả hơn và dễ dàng quản lý hơn.

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về useRef và cách sử dụng nó trong các ứng dụng React của bạn.