Rendering Danh Sách, Keys & Điều Kiện Hiển Thị Chuẩn

Bản chất thuật toán Reconciliation của React khi so sánh Key, cạm bẫy dùng index làm key và cách viết Conditional Rendering sạch.

Core Mental Model

Key là định danh duy nhất (Unique Identity) giúp React biết item nào được thêm, sửa hay xóa giữa các lần render. Dùng Index làm key sẽ làm sai lệch trạng thái nội bộ của item khi danh sách bị sắp xếp lại.

Key Takeaways & Principles

Key phải là giá trị duy nhất và ổn định giữa các lần render (ví dụ: database id `item.id`).

Tuyệt đối không dùng `Math.random()` hoặc Array `index` làm key cho các danh sách có thể thêm/xóa/sắp xếp.

Tránh cạm bẫy `items.length && <List />` vì khi `length === 0`, React sẽ render số 0 ra màn hình. Hãy dùng ternary hoặc `items.length > 0`.

React Core Foundations

beginner

16 phút

#List Rendering

#Keys

#Reconciliation