React Conditional Rendering Techniques & Best Practices

Rendering React components is very important since it can make your app behave faster or slower, depending on your approach for rendering components, re-rendering components based on condition or state/props change.

Here are a few methods you can use to render React components:

If Else conditional operator

import React from 'react';
import ReactDOM from 'react-dom';

function GuestComponent() {
    return <h1>Welcome guest</h1>
}

function BlogComponent() {
    return <h1>Welcome back</h1>
}


function MyComponent(props) {
    const isSubscribed = props.isSubscribed;

    if(isSubscribed) {
        return <BlogComponent />;
    }

    return <GuestComponent />
}

export default MyComponent;

ReactDOM.render(
    <MyComponent isSubscribed={false}/>,
document.getElementById('root'))

Ternary operation in React

Conditionally rendering React elements inline means to use the JavaScript conditional operator:

condition ? expr1 : expr2

import React from 'react';
import ReactDOM from 'react-dom';

function GuestComponent() {
    return <h1>Welcome guest</h1>
}

function BlogComponent() {
    return <h1>Welcome back</h1>
}


function MyComponent(props) {
    const isSubscribed = props.isSubscribed;
    return (
        <>
            { isSubscribed?
                <BlogComponent /> :
                <GuestComponent />
            }
        </>
    )
}

export default MyComponent;

ReactDOM.render(
    <MyComponent isSubscribed={false}/>,
document.getElementById('root'))

Inline If with Logical && Operator

true && expression

false && expression

import React from 'react';
import ReactDOM from 'react-dom';


function MyComponent() {
    const errors = ['error1', 'error2'];

    return (
        <>
            { errors.length > 0 &&
                <h2>
                    You have {errors.length} errors.
                </h2>
            }
        </>
    )
}

export default MyComponent;

ReactDOM.render(
    <MyComponent />,
document.getElementById('root'))

Inline If-Else with Conditional Operator

import React from 'react';
import ReactDOM from 'react-dom';


function MyComponent() {
    const isLoggedIn = false;

    return (
        <div>
            The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
        </div>
    );
}

export default MyComponent;

ReactDOM.render(
    <MyComponent />,
document.getElementById('root'))

Return null to Prevent Component from Rendering

Returning null from a component’s render method does not affect the firing of the component’s lifecycle methods.

import React from 'react';
import ReactDOM from 'react-dom';


/**
 * @return {null}
 */
function MyComponent(props) {
    if (!props.warning) {
        return null;
    }

    return (
        <div className="warning">
            Warning!
        </div>
    );
}

export default MyComponent;

ReactDOM.render(
    <MyComponent warning={true} />,
document.getElementById('root'))

Immediately-invoked function expressions

Functions that are executed immediately after they are defined:

( function (/* arguments */) {
    // ...
} ) (/* arguments */);

Or with arrow functions:

( (/* arguments */) => {
    // ...
} ) (/* arguments */);

Thanks for reading. I hope you learned something interesting about React!
If you found this article useful, please share it with others. Don’t forget to subscribe to get notified for the upcoming articles.