ReactReact bỏ qua null, undefined, true và false; nhưng số 0 và chuỗi thì render ra màn hình. Chuỗi rỗng cũng không hiện gì, nhưng nó không nằm trong nhóm bị bỏ qua — nó vẫn là một giá trị React đem đi render, chỉ là render ra rỗng.
{null} // không có gì
{undefined} // không có gì
{false} // không có gì
{''} // được render, nhưng ra rỗng
{0} // hiện chữ "0"
{'0'} // hiện chữ "0"
{NaN} // hiện chữ "NaN"Danh sách "bị bỏ qua" chính là thứ khiến && dùng được để render có điều kiện: {isOpen && <Menu />} cho ra false khi đóng, và false thì React lờ đi.
Nhưng && không trả về false — nó trả về toán hạng trái khi toán hạng đó falsy. Với count bằng 0:
{count && <List />} // → 0 → hiện số 0 lạc lõng trên giao diện
{count > 0 && <List />} // → false → không hiện gì
{items.length ? <List /> : null} // cũng an toànĐây là bug rất hay gặp trên trang danh sách rỗng: giao diện đang trống bỗng có một số 0 mọc ra, và không có lỗi nào trong console để lần theo.
Cùng lớp vấn đề còn có chuỗi rỗng: {name && <Badge />} với name là '' cho ra '', không hiện gì nên trông có vẻ đúng — nhưng nó đúng vì may, không vì logic.
Lưu ý: Quy tắc an toàn là để bên trái && luôn là boolean thật. Dùng phép so sánh (count > 0), ép kiểu (Boolean(count)), hoặc chuyển hẳn sang ba ngôi khi cần rõ ràng.