Bỏ qua điều hướng

Prompt miễn phí

Giải thích luồng dữ liệu React qua props, state và render lại

Phân tích component React để hiểu dữ liệu đi qua props, state và điểm gây render lại; kèm gợi ý cải thiện.

Onter AdminCập nhật 26/09/2026 Mới · Chưa có đánh giá 0 lượt copy
CodingChatGPTCodex

Prompt dùng để làm gì?

Phân tích component React để hiểu dữ liệu đi qua props, state và điểm gây render lại; kèm gợi ý cải thiện.

Điền thông tin của bạn

Prompt

Bạn là giảng viên React có kinh nghiệm phân tích mã nguồn thực tế. Hãy đọc component dưới đây và giải thích rõ luồng dữ liệu giữa {{ten_component_chinh}} và các component liên quan: props nào đi vào, state nào được giữ cục bộ, state nào làm giao diện render lại, và vì sao. Nếu có callback truyền xuống hoặc dữ liệu được nâng lên cha, hãy mô tả theo từng bước cập nhật. Sau đó nêu các điểm có thể gây render thừa, prop drilling hoặc state đặt sai chỗ, rồi đề xuất cách cải thiện bằng tách component, memo hóa hoặc đổi vị trí state nếu phù hợp. Trình bày theo cấu trúc: 1) tóm tắt luồng dữ liệu, 2) thời điểm render lại, 3) vấn đề tiềm ẩn, 4) gợi ý sửa.
Xem đã lưu

Input mẫu

ten_component_chinh: UserList

Code component:
function UserList({ users, onSelect }) { const [filter, setFilter] = useState(''); ... }

Output mẫu

1) Luồng dữ liệu: props users đi từ cha xuống, filter là state cục bộ, onSelect được gọi khi chọn một item
2) Render lại: khi filter đổi hoặc khi users từ cha đổi thì component render lại
3) Vấn đề: filter đặt đúng chỗ nhưng danh sách lọc lại mỗi render có thể tốn kém
4) Gợi ý: dùng useMemo cho danh sách đã lọc, tách item thành component con nếu cần

Cách sử dụng

Chèn tên component chính vào biến, dán code React vào phần mô tả của công cụ, rồi đối chiếu phần giải thích xem đã chỉ ra đúng props, state, callback và nguyên nhân render lại hay chưa; nếu thiếu, yêu cầu phân tích sâu hơn theo từng dòng cập nhật.

Giải thích cấu trúc

Role: người dạy React tập trung vào luồng dữ liệu và hành vi render. Context: người học có sẵn code component nhưng chưa hiểu props, state và cập nhật giao diện. Task: giải thích luồng dữ liệu, xác định điểm render lại và đề xuất cải thiện. Constraints: phải bám vào code được cung cấp, không suy đoán ngoài dữ kiện. Output: phân tích theo bước rõ ràng, có chỉ ra tối ưu hợp lý.

Mẹo sử dụng

  • Hãy yêu cầu mô tả thêm nếu component dùng context, reducer hoặc custom hook.
  • Nếu có danh sách dài, kiểm tra khả năng lọc/sắp xếp gây render tốn kém.
  • Phân biệt render do state nội bộ với render do props từ cha thay đổi.

Nguồn và giấy phép

ONTER biên tập · original

Đánh giá prompt

Chọn số sao theo trải nghiệm của bạn. Bạn có thể sửa đánh giá sau một phút.

Prompt liên quan

Tài khoản Onter

Đăng nhập rồi tiếp tục việc đang làm.

Mở trang đăng nhập riêng nếu trình duyệt chưa hiển thị biểu mẫu.

Contact Me on Zalo