JSX is a powerful extension to JavaScript that allows us to define UI components. But on the other hand, it doesn’t support loops or conditional expressions directly.

If you want to iterate over a list to render more than one component or implement some conditional logic, you have to use pure JavaScript.

But then we have Conditional Rendering in React that makes the job easier.

What is Conditional Rendering in React:

In React, Conditional rendering refers to the process in which you can render elements and components based on your conditions.

Conditional Rendering in React works similarly to the conditions work in JavaScript. You can create different components in React that contain the behavior you require. Then, based on the status of your application, you can render only some of them.

We can have more than one way to use Conditional Rendering in React, Some are better suited than other depending upon the scenario and requirement you are trying to achieve.

We can have the below scenarios where we can use Conditional Rendering:

• Showing or Hiding elements.

• Toggling between two components.

• Authorization and Authentication Mechanism.

• Render external data from an API.

This article covers the most used and popular ways of Conditional Rendering in React.

1. if-else in React

As we all know if-else is the most common and easy way to have a conditional rendering. The syntax is also similar to JavaScript.

We can apply the if-else conditional logic to JSX in React. Remember, JSX is compiled to JS before being executed, so we are literally writing in JS code. It can be understood in the below example.

var globalLoading = false;

function App() {
    if(globalLoading) {
        return <div>It's Loading</div>
    } else {
        return <div>It's not Loading</div>
    }
}
export default App;

So if-else is the easiest way to write and solve the task but I am sure you all know that this is not good practice and implementation.

The thing is if-else statements can cause a waste of re-rendering in React. It might not be perceived in small to medium scale applications, but the performance drag will be quite noticeable in large-scale applications which have thousands of components.

2. Inline If-Else with Conditional Operator in React

In This method, The operator is wrapped in curly braces and the expression can contain JSX, optionally wrapped in parentheses to improve readability and can be applied in different parts of the component.

Below is the syntax for using Ternary Conditional Operator

condition ? expr_if_true : expr_if_false

Let's have one example to understand Inline If-else with Conditional Operator:

let globalLoading = true;
function App() {
  return (
    <>
      {globalLoading ? (
        <div>It's Rendering</div>
      ) : (
        <div>It's not Rendering</div>
      )}
    </>
  );
}
export default App;

3. Inline If with Logical && Operator

Wrapping expressions in curly brackets allows you to embed them in JSX. This includes the logical && operator in JavaScript. It's useful for conditionally including a component.

Though the JSX phrase with AND (&&) operator is similar to the two previous approaches for conditional rendering, it is considered a preferable alternative because it forces you to return the same structure while conditionally returning and rendering items.

In React, you can have an expression like this:

return (
    <div>
        { showHome && <Home /> }
    </div>
);

If showHome evaluates to true, the <Home/> component will be returned by the expression. If showHome evaluates to false, the <Home/> component will be ignored, and an empty <div> will be returned.

4. React Component retuning Null

We can set a component to return a null value instead of a JSX expression so that it would be evaluated but will not render anything.

Please note that When null is returned by a component it prevents React from mounting the component.

It can be understood in the below example:

function App(props) {
    if(props.noRender)
        return null

    return (
        <div>App Component</div>
    )
}

This component returns null if the noRender prop is set. So if we don’t want the App component to render we will set the noRender props .

Conclusion:

In conclusion, we examined a variety of approaches to conditional rendering in React. Each method has its own set of benefits and drawbacks. When adopting any of these options, simplicity is also vital to consider. Your use case may only require the if operator. In effect, choose the solution that best fits your current use case, and we hope that this article has helped you make a more informed selection.

Thank you for Reading.

You can check out my other articles as well on:

JSX in React - Detailed Explanation with example

What are Controlled and Uncontrolled Components in React JS? Which one to use?

How and where to deploy your React App in less than 5 minutes..