Nội dung

18.3 So sánh useRef và useState_ Khi nào dùng cái nào

Video này sẽ giúp bạn hiểu rõ sự khác biệt giữa hai hook quan trọng trong React: useRef và useState, cũng như khi nào nên sử dụng mỗi loại trong thực tế. Bạn sẽ được dẫn dắt qua các ví dụ trực quan để thấy rõ cách hoạt động của từng hook, và lý do tại sao chúng lại ảnh hưởng khác nhau đến giao diện người dùng (UI). Nội dung bài giảng đi sâu vào việc so sánh code giữa useState và useRef với cùng một bài toán quản lý input, chỉ ra điểm mạnh, điểm yếu, và hậu quả khi áp dụng không đúng. Bạn sẽ được giải thích tại sao useRef có thể truy cập trực tiếp tới giá trị của phần tử trong DOM, nhưng lại không tự động kích hoạt việc cập nhật lại giao diện. Ngược lại, useState đảm bảo mỗi lần giá trị thay đổi, UI sẽ được cập nhật lại đúng với trạng thái mới. Ngoài ra, video còn giải đáp một trong những thắc mắc phổ biến nhất: "Nếu đã dùng useRef để tham chiếu tới input thì liệu còn cần useState nữa không?" Thông qua phần thực nghiệm, bạn sẽ thấy rõ: nếu chỉ dùng useRef để hiển thị giá trị, giao diện sẽ không tự động cập nhật khi input thay đổi, dẫn đến hiện tượng không đồng bộ giữa dữ liệu thực tế và giao diện hiển thị. Đây chính là nguyên nhân khiến các state-driven UI như React phải tách biệt giữa state và ref. Cuối cùng, video tổng hợp lại thành bảng so sánh chi tiết, giúp bạn ghi nhớ: useState dành cho các giá trị ảnh hưởng đến render, còn useRef phù hợp để lưu trữ giá trị trung gian, tham chiếu DOM hoặc các biến không liên quan trực tiếp tới quá trình render. Sau khi học xong bài này, bạn sẽ tự tin lựa chọn hook phù hợp cho từng tình huống cụ thể, hạn chế bug, tối ưu hiệu năng và tăng khả năng kiểm soát luồng dữ liệu trong React. Đây là kiến thức nền tảng, cực kỳ hữu ích cho cả những bạn mới bắt đầu và lập trình viên đã có kinh nghiệm muốn tối ưu dự án.