How to NOT React: Common mistake in Conditional Rendering

Almost in every app, we encounter situations where we need to render components or elements conditionally. The most common case is the usage of if-else, ternary operator, && operator or switch statement. This React pattern is one of the most useful, but let us try to describe a situation when it can be dangerous. Have a look at the code below.

const WrapperComponent = props => {
  const { data, loading } = useCurrentUserData();

  return (
    <React.Fragment>
    {
      loading ? (
        <div>Loading...</div>
      ) : (
        <SomeChildComponent data={data} />
      )
    }
    </React.Fragment>
  );
};

While data is not fetched, we can see loading on the page.

Looks fine, right? When loading is enabled SomeChildComponent is removed from the DOM, and when data is fetched React renders it again.

You may say it’s not a big deal to render such a case, but what if data is fetching on a button click or SomeChildComponent contains a big components tree? Every time SomeChildComponent is recreated, the components tree inside it will be recreated as well. As a result, we have useless re-renders, functions initializes, some calculations that will be repeatedly called.

This problem is very hard to detect, but let’s define some rules to implement a more clean way of this use case.

• Try to avoid Loading on the root level. Usually, the only thing you need is to add it to a particular component like Button, Table, Chart, etc.

• If you need to have Loading on the root level or on the entire page, you should wrap your components with the Loading component. In this case, when data is fetching, loading will be over your components tree without removing them from the DOM. Example:

const SpinElement = () => {
  return (
    <div className="loader center">
      <i className="fa fa-cog fa-spin" />
    </div>
  ); 
};

const Loading = ({ isLoading }) => {
  return (
    <React.Fragment>
      {isLoading && <SpinElement />}

      {this.props.children}
    <React.Fragment>
  );
};

Using:

const WrapperComponent = props => {
  const { data, loading } = useCurrentUserData();
  
  return (
    <Loading loading={loading}>
      <ComplexCoponentsTree data={data} />
    </Loading>
  );
};

• Make sure, that the components tree is pretty much simple (max 2 child components) without complex logic. If not, you might need to think about loading strategy on the page.

Summary

The skill of a talented software engineer is fundamental for bringing modern items to the market — this can be why the number of entrepreneurs hiring coding talent grows exponentially each year. Avoiding this common mistake in Conditional Rendering is very important in the development process. In this article, we showed you the bad use case of conditional rendering. We hope it was helpful for you to check the loading strategy in your app.

Ukraine, for one, is one of the foremost helpful goals for outsourcing. In case you want to hire skilled local developers, don’t hesitate to reach out to Honeycomb Software. Our team supports companies of all scales with software development, testing, design, and product support. We would be happy to collaborate with you and to help you with your project! Just drop a line 🙂

Denys M