Conditional Rendering

Conditional rendering is a crucial concept in React that allows you to render different components or elements based on certain conditions. This technique enables you to create dynamic and interactive user interfaces. In React 19, conditional rendering can be achieved using various methods, including the use of JavaScript operators and built-in React hooks.

Basic Example

To get started with conditional rendering, let’s consider a simple example where we want to display a greeting message based on the time of day. We can use the ternary operator to conditionally render the message:

import React from 'react';
 
function Greeting() {
  const hour = new Date().getHours();
  return (
    <div>
      {hour < 12 ? <p>Good morning!</p> : hour < 18 ? <p>Good afternoon!</p> : <p>Good evening!</p>}
    </div>
  );
}

In this example, the Greeting component uses the ternary operator to conditionally render a greeting message based on the current hour.

Advanced Usage

For more complex scenarios, you can use the && operator to conditionally render components. Let’s consider an example where we want to display a loading indicator while data is being fetched:

import React, { useState, useEffect } from 'react';
 
function DataLoader() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
 
  useEffect(() => {
    // Simulate data fetching
    setTimeout(() => {
      setData('Loaded data');
      setIsLoading(false);
    }, 2000);
  }, []);
 
  return (
    <div>
      {isLoading && <p>Loading...</p>}
      {data && <p>Data: {data}</p>}
    </div>
  );
}

In this example, the DataLoader component uses the && operator to conditionally render a loading indicator while data is being fetched. Once the data is loaded, the component renders the data instead of the loading indicator.

You can also use the useMemo hook to memoize the result of a conditional rendering expression. This can help improve performance by avoiding unnecessary re-renders:

import React, { useMemo } from 'react';
 
function ConditionalRenderer() {
  const condition = true;
  const result = useMemo(() => {
    if (condition) {
      return <p>Condition is true</p>;
    } else {
      return <p>Condition is false</p>;
    }
  }, [condition]);
 
  return result;
}

Best Practices

When using conditional rendering, keep the following best practices in mind:

• Use the ternary operator for simple conditional expressions
• Use the && operator for more complex scenarios
• Avoid using conditional rendering for complex logic; instead, break it down into smaller, more manageable components
• Use useMemo to memoize the result of conditional rendering expressions when necessary

Key Takeaways

• Conditional rendering allows you to render different components or elements based on certain conditions
• Use the ternary operator, && operator, or useMemo hook to achieve conditional rendering
• Break down complex conditional logic into smaller, more manageable components
• Use best practices to improve performance and readability of your code