So sánh điểm khác nhau của useRef và createRef trong React gì?

useRef và createRef trong React đều được sử dụng để tạo ra các refs, nhưng chúng có một số điểm khác biệt quan trọng:

useRef:

• Hook useRef: useRef là một hook được giới thiệu trong React 16.8, cho phép bạn sử dụng refs trong function components.
• Giữ giá trị qua re-renders: useRef trả về một đối tượng ref có thuộc tính current bền vững qua các lần re-render. Nghĩa là, nếu bạn gán một giá trị cho ref.current, giá trị đó sẽ giữ nguyên giữa các lần re-render, trừ khi bạn chủ động thay đổi nó.
• Sử dụng trong Function Components: useRef thường được sử dụng trong function components vì class components không thể sử dụng hooks.
• Có thể lưu trữ bất kỳ giá trị nào: Ngoài việc lưu trữ một nút DOM, useRef còn có thể lưu trữ bất kỳ giá trị nào bạn muốn giữ qua các lần re-render.

createRef:

• Phương thức createRef: createRef là một phương thức của React dùng để tạo refs trong class components.
• Tạo mới mỗi lần render: Mỗi lần component re-render, createRef sẽ tạo ra một đối tượng ref mới. Điều này có nghĩa là bạn không thể dựa vào createRef để giữ giá trị qua các lần re-render.
• Sử dụng trong Class Components: createRef thường được sử dụng trong class components, nơi mà hooks không khả dụng.
• Chủ yếu dùng để truy cập DOM: createRef thường được sử dụng để truy cập nút DOM hoặc component React sau khi component đã được mount.

So sánh:

• Vòng đời: useRef giữ giá trị qua các lần re-render, trong khi createRef tạo ra một đối tượng ref mới mỗi lần component re-render.
• Loại Component: useRef được sử dụng trong function components, createRef được sử dụng trong class components.
• Cách sử dụng: useRef có thể lưu trữ bất kỳ giá trị nào và thường được sử dụng để giữ giá trị qua các lần re-render, trong khi createRef chủ yếu được sử dụng để truy cập nút DOM hoặc component React.

Tóm lại, useRef và createRef đều tạo ra các refs nhưng được sử dụng trong các loại component khác nhau và có cách hoạt động khác nhau liên quan đến vòng đời của refs trong quá trình re-render của component.