useRef là một hook trong React được dùng để tạo tham chiếu mutable mà không gây ra re-render khi giá trị của nó thay đổi. useRef có nhiều mục đích sử dụng khác nhau trong React, và có một số lợi ích quan trọng so với việc sử dụng một biến const bên ngoài component.

Mục đích của useRef

1. Truy cập DOM trực tiếp:

   useRef thường được dùng để truy cập trực tiếp các phần tử DOM trong functional components. Điều này rất hữu ích khi bạn cần tương tác với các phần tử DOM sau khi chúng đã được render.

    import React, { useRef, useEffect } from 'react';
    import { View, TextInput, Button } from 'react-native';
   
    const MyComponent = () => {
      const inputRef = useRef(null);
   
      useEffect(() => {
        // Focus vào input khi component được mount
        inputRef.current.focus();
      }, []);
   
      return (
        <View>
          <TextInput ref={inputRef} placeholder="Nhập gì đó..." />
        </View>
      );
    };
   
    export default MyComponent;
   

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

   useRef có thể được dùng để lưu trữ giá trị mà không gây ra re-render khi giá trị thay đổi. Điều này rất hữu ích khi bạn cần giữ trạng thái giữa các lần render mà không muôn component bị re-render

    import React, { useState, useRef } from 'react';
    import { View, Button, Text } from 'react-native';
   
    const MyComponent = () => {
      const [count, setCount] = useState(0);
      const previousCountRef = useRef(count);
   
      useEffect(() => {
        previousCountRef.current = count;
      }, [count]);
   
      return (
        <View>
          <Text>Count: {count}</Text>
          <Text>Previous Count: {previousCountRef.current}</Text>
          <Button title="Increment" onPress={() => setCount(count + 1)} />
        </View>
      );
    };
   
    export default MyComponent;
   

3. Giữ trạng thái giữa các lần render:

   useRef có thể được sử dụng để giữ trạng thái giữa các lần render, ví dụ như để giữ trạng thái của một biến mà không cần thiết đưa nó vào state của React.

Tại sao không dùng một biến const bên ngoài component thay cho useRef?

1. Không thể duy trì trạng thái giữa các lần render:

   Biến const bên ngoài component không giữ được trạng thái giữa các lần render của component. Mỗi lần component được render lại, biến const sẽ được tạo lại mới và không giữ được giá trị từ lần render trước.

2. Không thể tương tác với DOM:

   Biến const không thể được sử dụng để tham chiếu tới các phần tử DOM vì nó không cung cấp cơ chế truy cập trực tiếp vào các phần tử DOM đã được render.

3. Không theo dõi thay đổi của giá trị:

   Biến const không thể tự động cập nhật giá trị khi component render lại, trong khi useRef thì có thể giữ giá trị giữa các lần render mà không gây ra re-render

import React, { useState, useRef } from 'react';
import { View, Button, Text } from 'react-native';

let outsideVar = 0;

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const refVar = useRef(0);

  const incrementBoth = () => {
    outsideVar += 1;
    refVar.current += 1;
    setCount(count + 1);
  };

  return (
    <View>
      <Text>Count: {count}</Text>
      <Text>Outside Var: {outsideVar}</Text>
      <Text>Ref Var: {refVar.current}</Text>
      <Button title="Increment" onPress={incrementBoth} />
    </View>
  );
};

export default MyComponent;

• outsideVar không giữ được giá trị đúng giữa các lần render và sẽ không thể được sử dụng cho các trạng thái thay đổi động.

• refVar.current giữ được giá trị giữa các lần render và có thể được sử dụng để lưu trữ trạng thái mà không gây re-render.