Làm chủ kỹ thuật render có điều kiện trong React: So sánh Logical && và Toán tử ba ngôi

React xoay quanh việc xây dựng các giao diện động — và kỹ thuật render có điều kiện là một trong những công cụ quan trọng nhất trong bộ công cụ của bạn. Dù là hiển thị hồ sơ người dùng sau khi đăng nhập hay hiển thị spinner khi dữ liệu đang tải, việc biết khi nào và cách hiển thị nội dung dựa trên điều kiện là điều cốt lõi.

Trong bài viết này, chúng ta sẽ đi sâu vào cách sử dụng hai kỹ thuật render có điều kiện phổ biến nhất trong React: toán tử AND logic (&&) và toán tử ba ngôi (? :) — kèm theo ví dụ, các thực hành tốt và một vài lỗi thường gặp cần tránh.

Render có điều kiện là gì?

Render có điều kiện trong React cho phép bạn kiểm soát những gì được hiển thị trong giao diện người dùng dựa trên state hoặc props của component.

Hãy tưởng tượng nó như là câu lệnh if trong phần hiển thị component:

{isLoggedIn && <p>Welcome back!</p>} {items.length === 0 ? <p>No items</p> : <ul>{items.map(...)} </ul>}

Sử dụng toán tử && (AND logic)

Toán tử && rất phù hợp khi bạn chỉ muốn hiển thị một thứ gì đó nếu điều kiện là đúng.

Ví dụ:

{isLoggedIn && <h2>Welcome, user!</h2>}

Trong đó:

• Nếu isLoggedIn là true, nó sẽ render <h2>.
• Nếu false, không render gì cả.

Cẩn thận với các giá trị falsy như 0

{items.length && <p>{items.length} items</p>} // Renders 0!

Hãy ép kiểu về boolean bằng !!:

{!!items.length && <p>{items.length} items</p>}

Sử dụng toán tử ba ngôi ? :

Toán tử ba ngôi dùng để hiển thị một trong hai khối giao diện tuỳ vào điều kiện.

Ví dụ:

{isLoggedIn ? <Dashboard /> : <Login />}

Hoặc dùng trực tiếp trong dòng:

<button>{isLoading ? 'Loading...' : 'Submit'}</button>

Best practice

1. Ưu tiên trả về sớm (early return)

Thay vì viết lồng ghép phức tạp:

return ( <div> {user ? user.isAdmin ? <AdminPanel /> : <UserPanel /> : <Login />} </div>
)

Hãy viết gọn và rõ ràng hơn:

if (!user) return <Login />;
if (user.isAdmin) return <AdminPanel />;
return <UserPanel />;

2. Trích điều kiện ra thành biến

Giúp dễ đọc và dễ bảo trì hơn:

const showGreeting = isLoggedIn && user?.name; return showGreeting ? <h1>Hello, {user.name}</h1> : null;

Những lỗi thường gặp

• Tránh render trực tiếp các giá trị như false, 0, hoặc undefined
• Tránh viết quá nhiều ternary lồng nhau — hãy tách logic ra thành các hàm hoặc biến phụ trợ
• Hiểu rõ các khái niệm truthy và falsy trong JavaScript

Lời kết

Render có điều kiện là một trong những tính năng mạnh mẽ nhất của React. Khi bạn làm chủ được cách sử dụng && và ? :, bạn sẽ có thể xây dựng các giao diện phản hồi tốt, trực quan và linh hoạt theo hành vi người dùng cũng như trạng thái ứng dụng.