React Conditional Rendering

Conditional rendering allows dynamic control over which UI elements or content are displayed based on specific conditions. It is commonly used in programming to show or hide elements depending on user input, data states, or system status. This technique improves user experience by ensuring that only relevant information is presented at a given time.

What is Conditional Rendering in React?

Conditional rendering in React works similarly to conditions in JavaScript. It enables components to display different outputs depending on states or props. This ensures that the UI updates dynamically based on logic instead of manually manipulating the DOM.

Ways to Implement Conditional Rendering in React

1. Using If/Else Statements

If/else statements allow rendering different components based on conditions. This approach is useful for complex conditions.

function Item({ name, isPacked }) {
    if (isPacked) {
        return <li className="item">{name} ✅</li>;
    }
    return <li className="item">{name}</li>;
}

• If isPacked is true, it displays: Space Suit ✅
• If isPacked is false, it displays: Space Suit

2. Using Ternary Operator

The ternary operator (condition ? expr1: expr2) is a concise way to conditionally render JSX elements. It’s often used when the logic is simple and there are only two options to render.

function Greeting({ isLoggedIn }) {
    return <h1>{isLoggedIn ? "Welcome Back!" : "Please Sign In"}</h1>;
}

• If isLoggedIn is true: Welcome Back!
• If isLoggedIn is false: Please Sign In

3. Using Logical AND (&&) Operator

The && operator returns the second operand if the first is true, and nothing if the first is false. This can be useful when you only want to render something when a condition is true.

function Notification({ hasNotifications }) {
    return <div>{hasNotifications && <p>You have new notifications!</p>}</div>;
}

• If hasNotifications is true: You have new notifications!
• If hasNotifications is false: Nothing is rendered.

4. Using Switch Case Statements

Switch case statements are useful when you need to handle multiple conditions, which would otherwise require multiple if conditions. This approach can be more readable if there are many conditions to check.

function StatusMessage({ status }) {
    switch (status) {
        case 'loading':
            return <p>Loading...</p>;
        case 'success':
            return <p>Data loaded successfully!</p>;
        case 'error':
            return <p>Error loading data.</p>;
        default:
            return <p>Unknown status</p>;
    }
}

• If status is 'loading': Loading...
• If status is 'success': Data loaded successfully!
• If status is 'error': Error loading data.

5. Conditional Rendering in Lists (Using .map())

Conditional rendering can be helpful when rendering lists of items conditionally. You can filter or map over an array to selectively render components based on a condition.

const items = ["Apple", "Banana", "Cherry"];
const fruitList = items.map((item, index) =>
    item.includes("a") ? <p key={index}>{item}</p> : null
);

If the item contains letter "a", it will be displayed.

6. Conditional Rendering with Component State

You can also manage conditional rendering based on the component's state. For example, you can show a loading spinner until some data is fetched, and then display the actual content once the data is ready.

Syntax:

if (loading) {
  // Render Loading Component
} else {
  // Render Data Component
}

Practical Use Cases for Conditional Rendering

1. Displaying User Profile Based on Authentication

You can conditionally render a user’s profile page if the user is logged in, or a login form if not.

import React, { useState } from 'react';

function App() {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    return (
        <div>
            {isAuthenticated ? (
                <h1>User Profile</h1>
            ) : (
                <button onClick={() => 
                    setIsAuthenticated(true)}>Log In</button>
            )}
        </div>
    );
}

export default App;

Output

In this example

• The component uses useState to manage the isAuthenticated state, which is initially set to false.
• The isAuthenticated state determines what is rendered: if false, a "Log In" button is displayed; if true, a "User Profile" heading appears.
• When the "Log In" button is clicked, setIsAuthenticated(true) updates the state to true, triggering a re-render.
• After the state update, the button is replaced with "User Profile", demonstrating conditional rendering based on authentication state.

2. Showing Loading State

You can display a loading spinner or message while waiting for data to be fetched.

import React, { useState, useEffect } from 'react';

function App() {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState(null);

    useEffect(() => {
        setTimeout(() => {
            setData('Fetched Data');
            setIsLoading(false);
        }, 2000);
    }, []);

    return (
        <div>
            {isLoading ? (
                <h1>Loading...</h1>
            ) : (
                <h1>{data}</h1>
            )}
        </div>
    );
}

export default App;

Output

In this example

• The component uses useState to manage two state variables: isLoading (initially true) and data (initially null).
• The useEffect hook runs once after the component mounts and starts a setTimeout to simulate fetching data after 2 seconds.
• When the timeout completes, setData('Fetched Data') updates the data state, and setIsLoading(false) changes isLoading to false.
• The component initially renders "Loading...", and once the state updates, it re-renders to display "Fetched Data".

Performance Considerations in Conditional Rendering

• Avoid unnecessary re-renders: Use React.memo() or shouldComponentUpdate() to prevent unnecessary rendering.
• Lazy Load Components: Use React.lazy() to load components dynamically only when needed.
• Short-circuit Evaluation (&&) is Useful but Risky: Ensure that the first condition is always a boolean, otherwise unexpected values may be rendered.

Best Practices for Conditional Rendering

• Keep it simple: Try to avoid deeply nested conditions, as it can make the component hard to read and maintain. Use ternary operators or helper functions where possible.
• Early returns: Consider using early returns to handle conditions upfront, especially when there’s more than one condition.
• Component-based rendering: If the conditional rendering logic is complex, consider breaking it into smaller components to improve readability and reusability.