Nội dung

26.11. React key prop React useRef bị lưu dữ liệu cũ Giải thích & fix bằng key prop tuhoc.cc

Trong video này, tuhoc.cc sẽ cùng bạn phân tích một vấn đề rất phổ biến nhưng cũng rất dễ gây nhầm lẫn khi học React, đặc biệt là với những bạn đã biết useRef, useState và đang bắt đầu tách component trong dự án thực tế. Đó là hiện tượng dữ liệu bị giữ lại không mong muốn dù component đã render lại, dẫn tới hành vi giao diện sai logic so với kỳ vọng của người lập trình. Thông qua một ví dụ quiz app thực tế, video giải thích rõ vì sao bộ câu trả lời chỉ được xáo trộn đúng một lần, dù người dùng chuyển sang câu hỏi mới. Nguyên nhân không nằm ở thuật toán xáo trộn, cũng không phải do React bị lỗi, mà đến từ cách useRef hoạt động trong vòng đời component. Bạn sẽ hiểu rằng useRef không bị reset khi component render lại, và vì vậy giá trị bên trong ref sẽ được giữ nguyên cho đến khi component bị unmount hoàn toàn. Từ vấn đề đó, video dẫn dắt người học tới một khái niệm rất quan trọng nhưng thường bị hiểu sai, đó là key prop trong React. Key không chỉ dùng để loại bỏ cảnh báo khi render danh sách, mà còn đóng vai trò giúp React xác định identity của component giữa các lần render. Khi key thay đổi, React sẽ unmount instance cũ và mount lại instance mới, kéo theo toàn bộ state và effect được reset. Đây chính là chìa khóa để giải quyết bài toán reset timer, reset đáp án và làm cho ứng dụng hoạt động đúng với mong muốn. Video cũng làm rõ phạm vi ảnh hưởng của key prop, nhấn mạnh rằng key chỉ có ý nghĩa giữa các phần tử cùng cấp, và việc trùng key giữa các cấp khác nhau không gây vấn đề. Điều này giúp người học tránh được nhiều hiểu nhầm phổ biến khi bắt đầu sử dụng key trong các component phức tạp. Ngoài ra, bài giảng còn giúp bạn phân biệt rõ giữa render lại và remount component, hai khái niệm thường bị đánh đồng với nhau. Đây là nền tảng rất quan trọng để hiểu sâu React, đặc biệt khi làm việc với hook, effect, timer hoặc các logic phụ thuộc vào vòng đời component. Video này phù hợp với những bạn đang học React ở mức cơ bản đến trung cấp, đã biết hook nhưng chưa thực sự hiểu sâu về cách React quản lý component. Nếu bạn từng gặp cảm giác code đúng nhưng ứng dụng vẫn hoạt động sai, hoặc từng bối rối khi useRef không reset như mong đợi, thì đây là bài học bạn không nên bỏ qua. tuhoc.cc mong rằng sau video này, bạn không chỉ biết cách sửa lỗi, mà còn hiểu rõ bản chất để tự tin áp dụng key prop và hook một cách đúng đắn trong các dự án React thực tế.