Nội dung

26.10. Ví dụ thực tế về useRef Ghi nhớ dữ liệu không render lại tuhoc.cc

Trong video này, chúng ta sẽ cùng tìm hiểu sâu về useRef trong React thông qua một bài toán rất thực tế và dễ gặp khi xây dựng ứng dụng. Đó là tình huống component bị render lại nhiều lần và kéo theo việc logic bên trong cũng bị thực thi lại, dẫn đến kết quả không mong muốn. Cụ thể trong ví dụ minh họa, khi người dùng chọn đáp án, component render lại khiến danh sách đáp án bị xáo trộn liên tục, làm trải nghiệm người dùng trở nên khó chịu. Thông qua bài học này, bạn sẽ hiểu rõ vì sao việc cập nhật state trong React luôn dẫn đến render lại component, và tại sao không phải dữ liệu nào cũng nên được lưu bằng useState. Từ đó, video giới thiệu useRef như một giải pháp phù hợp để lưu trữ những dữ liệu chỉ cần ghi nhớ nội bộ, không cần phản ánh trực tiếp ra giao diện. Video sẽ giúp bạn nắm rõ bản chất của useRef, đặc biệt là thuộc tính current. Bạn sẽ hiểu rằng React luôn giữ nguyên giá trị của current giữa các lần render, nhưng việc thay đổi giá trị này sẽ không làm component render lại. Đây chính là điểm mấu chốt khiến useRef trở thành công cụ rất mạnh trong những bài toán tối ưu logic, tránh chạy lại các đoạn xử lý không cần thiết. Ngoài ra, video cũng giúp bạn phân biệt rõ ràng khi nào nên dùng useState và khi nào nên dùng useRef. Nếu dữ liệu thay đổi và cần hiển thị ra giao diện, useState là lựa chọn bắt buộc. Ngược lại, nếu dữ liệu chỉ dùng để phục vụ logic nội bộ như ghi nhớ trạng thái đã xử lý, cache dữ liệu, hay tránh chạy lại thuật toán, thì useRef là lựa chọn hợp lý hơn. Một điểm quan trọng khác trong video là cách useRef được sử dụng như một bộ nhớ đệm. Thay vì để thuật toán xáo trộn chạy lại mỗi lần component render, chúng ta chỉ thực hiện việc này một lần duy nhất và lưu kết quả lại. Các lần render sau sẽ sử dụng lại dữ liệu đã được xử lý trước đó, giúp ứng dụng hoạt động ổn định và dễ kiểm soát hơn. Video cũng nhấn mạnh rằng useRef không phải là state và không nên bị lạm dụng để thay thế state. Việc hiểu sai điều này rất dễ dẫn đến những thiết kế sai trong React. Thông qua cách giải thích từng bước, video giúp người mới học React tránh được những nhầm lẫn phổ biến và xây dựng tư duy đúng ngay từ đầu. Đây là một bài học phù hợp cho những bạn đang học React cơ bản, đang làm quen với Hooks, hoặc từng gặp tình trạng render lại gây lỗi logic nhưng chưa hiểu rõ nguyên nhân. Sau khi xem xong video này, bạn sẽ hiểu useRef dùng để làm gì, khi nào nên dùng, và vì sao nó lại quan trọng trong những ứng dụng React thực tế. Kênh tuhoc.cc hướng tới việc dạy React một cách bài bản, dễ hiểu và đi từ bản chất. Video này là một phần trong chuỗi kiến thức giúp bạn xây dựng nền tảng vững chắc trước khi đi vào các kỹ thuật nâng cao hơn trong React.