[React Basics] Cách sử dụng Conditional Rendering trong React hiệu quả nhất

Bạn đã bao giờ tự hỏi làm thế nào các ứng dụng web hiện đại có thể linh hoạt đến vậy chưa? Nút "Đăng nhập" biến thành "Chào, [Tên người dùng]", một vòng xoay loading xuất hiện rồi biến mất, hay nội dung trang thay đổi hoàn toàn dựa trên quyền điều khiển của người dùng? Phép màu đằng sau sự biến hóa năng động đó chính là Conditional Rendering (kết xuất có điều kiện) - một trong những kỹ năng nền tảng và mạnh mẽ nhất trong React.

Trong bài viết này, chúng ta sẽ cùng nhau "mổ xẻ" mọi ngóc ngách của Conditional Rendering, từ những khái niệm cơ bản nhất đến các kỹ thuật nâng cao và lời khuyên thực chiến. 🚀

Conditional Rendering là gì và tại sao nó lại quan trọng?

Nói một cách đơn giản, Conditional Rendering là kỹ thuật cho phép bạn quyết định component nào hoặc phần tử JSX nào sẽ được hiển thị (render) ra màn hình dựa trên một hoặc nhiều điều kiện nhất định. Những điều kiện này thường là trạng thái (state) hoặc đạo cụ (props) của component.

Tại sao nó lại tối quan trọng? 🎯

• Tạo trải nghiệm người dùng "động" (Dynamic UX): Giao diện của bạn có thể phản ứng lại với tương tác của người dùng, dữ liệu từ server, hoặc bất kỳ thay đổi trạng thái nào trong ứng dụng.
• Quản lý trạng thái giao diện: Dễ dàng hiển thị các trạng thái khác nhau như isLoading, hasError, isEmpty, isSuccess.
• Phân quyền và cá nhân hóa: Hiển thị hoặc ẩn các tính năng dựa trên vai trò của người dùng (ví dụ: admin vs. user).
• Tối ưu hóa code: Giúp code của bạn sạch sẽ, dễ đọc và dễ quản lý hơn thay vì phải tạo ra nhiều component gần giống hệt nhau.

Các phương pháp Conditional Rendering phổ biến nhất

React cung cấp cho chúng ta nhiều cách để thực hiện conditional rendering. Việc lựa chọn phương pháp nào phụ thuộc vào độ phức tạp của logic và sở thích cá nhân.

1. Câu lệnh if / else kinh điển

Đây là cách tiếp cận cơ bản và rõ ràng nhất, rất giống với lập trình JavaScript thuần. Bạn sử dụng if / else bên ngoài JSX để quyết định sẽ return về khối JSX nào.

💡 Khi nào nên dùng? Khi logic điều kiện phức tạp, cần nhiều dòng lệnh để quyết định, hoặc khi bạn muốn trả về các component hoàn toàn khác nhau.

Ví dụ: Component Greeting chào người dùng nếu đã đăng nhập, ngược lại hiển thị nút đăng nhập.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <UserGreeting />
  } else {
    return <GuestGreeting />
  }
}

function UserGreeting() {
  return <h1>Chào mừng trở lại!</h1>
}

function GuestGreeting() {
  return <h1>Vui lòng đăng nhập.</h1>
}

2. Toán tử ba ngôi ? : - Nhanh, gọn, lẹ

Đây là cú pháp rút gọn của if / else và là cách cực kỳ phổ biến để thực hiện conditional rendering ngay bên trong JSX. Cú pháp của nó là: condition ? expressionIfTrue : expressionIfFalse.

💡 Khi nào nên dùng? Hoàn hảo cho các điều kiện đơn giản "nếu-thì-ngược lại" ngay tại nơi bạn muốn hiển thị kết quả.

Ví dụ: Hiển thị thông báo dựa trên trạng thái đăng nhập.

function LoginStatus({ isLoggedIn }) {
  return (
    <div>
      <h1>
        {isLoggedIn ? 'Bạn đã đăng nhập thành công!' : 'Mời bạn đăng nhập.'}
      </h1>
    </div>
  )
}

⚠️ Lưu ý: Tránh lồng nhiều toán tử ba ngôi vào nhau vì nó sẽ làm code của bạn trở nên rất khó đọc.

3. Toán tử Logic AND && - Hiển thị hoặc không gì cả

Khi bạn chỉ muốn render một thứ gì đó nếu điều kiện là đúng, và không render gì cả nếu nó sai, && là người bạn tốt nhất của bạn. Trong JavaScript, true && expression luôn trả về expression, và false && expression luôn trả về false. React sẽ không render false hay null, vì vậy đây là một mẹo tuyệt vời.

💡 Khi nào nên dùng? Khi bạn muốn hiển thị một phần tử chỉ khi một điều kiện được đáp ứng.

Ví dụ: Hiển thị số lượng thông báo chưa đọc chỉ khi có thông báo mới.

function Mailbox({ unreadMessages }) {
  const messageCount = unreadMessages.length
  return (
    <div>
      <h2>Hộp thư của bạn</h2>
      {messageCount > 0 && <p>Bạn có {messageCount} tin nhắn chưa đọc.</p>}
    </div>
  )
}

⚠️ Cạm bẫy cần tránh: Nếu biểu thức bên trái toán tử && trả về số 0, React sẽ render ra số 0 thay vì không có gì cả! Để tránh điều này, hãy luôn đảm bảo điều kiện của bạn trả về true hoặc false (ví dụ: messageCount > 0 && ... thay vì messageCount && ...).

4. Sử dụng biến và trả về null

Đôi khi, bạn muốn một component không hiển thị bất cứ thứ gì trong một số trường hợp nhất định. Việc return null từ phương thức render của một component sẽ ngăn nó render.

💡 Khi nào nên dùng? Khi bạn muốn "tắt" hoàn toàn việc render của một component dựa trên một điều kiện nào đó.

Ví dụ: Một component WarningBanner chỉ hiển thị khi có cảnh báo.

function WarningBanner({ warning }) {
  if (!warning) {
    return null // Không render gì cả
  }

  return <div className="warning">Cảnh báo!</div>
}

5. switch statement hoặc Object Mapping

Khi bạn có nhiều hơn hai điều kiện, việc dùng if / else lồng nhau hoặc toán tử ba ngôi sẽ rất rối. Đây là lúc switch hoặc mapping từ một object trở nên hữu ích để giữ cho code gọn gàng.

💡 Khi nào nên dùng? Khi bạn phải render các component khác nhau dựa trên một trạng thái có nhiều giá trị (ví dụ: loading, success, error, idle).

Ví dụ với Object Mapping (cách tiếp cận hiện đại và linh hoạt):

const NOTIFICATION_COMPONENTS = {
  success: <SuccessNotification />,
  error: <ErrorNotification />,
  info: <InfoNotification />,
}

function Notification({ status }) {
  // Trả về component tương ứng với status, hoặc null nếu không có
  return NOTIFICATION_COMPONENTS[status] || null
}

Bảng so sánh và Lời khuyên thực chiến

Để giúp bạn lựa chọn dễ dàng hơn, đây là bảng tổng kết nhanh:

Lời khuyên vàng 💡

1. Ưu tiên sự rõ ràng: Luôn chọn cách tiếp cận nào làm cho code của bạn dễ đọc và dễ hiểu nhất.
2. Đừng lạm dụng toán tử ba ngôi: Nếu logic trở nên phức tạp, hãy tách nó ra một hàm riêng hoặc sử dụng if / else.
3. Bao bọc logic phức tạp: Nếu điều kiện của bạn dài, hãy đặt nó vào một biến có tên gọi gợi nhớ trước khi sử dụng trong JSX.

   const canEditPost = user.isAdmin || user.id === post.authorId
   return <div>{canEditPost && <EditButton />}</div>
   

Kết luận: Nắm vững Conditional Rendering để "biến hóa" giao diện

Conditional Rendering không chỉ là một tính năng, nó là cốt lõi của việc xây dựng các giao diện người dùng tương tác và thông minh trong React. Bằng cách nắm vững các kỹ thuật từ if / else cơ bản đến Object Mapping linh hoạt, bạn đã trang bị cho mình một trong những công cụ mạnh mẽ nhất để biến những ý tưởng phức tạp thành các ứng dụng web mượt mà và trực quan.

Hãy bắt đầu áp dụng chúng vào dự án của bạn và xem giao diện của mình "biến hóa" một cách kỳ diệu. Chúc bạn thành công trên hành trình chinh phục React!