A Clean Way to Conditionally Render Components

Today, I want to share a clean way to conditionally render child components while using React. It's very simple.

Live Demo:
https://codesandbox.io/s/if-component-demo-9iipl?file=/src/App.js

Before

function App(){
  // ...
  return <div>
      {someCondition?
      <SomeChildA>
        <div>Some Contents</div>
        <div>Some Contents</div>
        <div>Some Contents</div>
      </SomeChildA>
      : 
      <SomeChildB>
        <div>Some Contents</div>
        <div>Some Contents</div>
        <div>Some Contents</div>
      </SomeChildB>}
    </div>
}

After

function App(){
  // ...
  return <div>
      <If condition={someCondition}>
        <SomeChildA>
          <div>Some Contents</div>
          <div>Some Contents</div>
          <div>Some Contents</div>
        </SomeChildA>
      </If>
      <If condition={!someCondition}>
        <SomeChildB>
          <div>Some Contents</div>
          <div>Some Contents</div>
          <If condition={someOtherCondition}>
            <NestExample/>
          </If>
          <div>Some Contents</div>
        </SomeChildB>
      </If>
    </div>
}

<If/> Component

function If(props) {
    return props.condition ? <>{props.children}</> : null;
}

Thanks for reading! Have a nice day!

Comments

[moorerichard]

We are a top-notch IGO Platform Development Company offering the industry best IGO development services for game developers and gaming enthusiasts to build community.

[Hendrik Volschenk]

I wanted to add the same comment about the content of the <If> being evaluated immediately
and got some quite surprising results.

See here: codesandbox.io/s/if-component-b5zxk

[Anxiny]

Yes, a good example of how it works

[Martin Pham]

Your idea is nice. However I think having an component would be overkill. Since the embed conditional rendering is already good.

I’d like to add a bit. Since you want to render the ComponentX only with some conditions, it’d be better if you could lazy load it. So it will be downloaded only when we need, therefore downsize the initial bundle. Lazy and Suspense can help you to do it.

[Igor Bykov]

Just out of curiosity: do you really think that evaluation of a control-flow-like one-liner might turn into a bottleneck in a react app?

I mean, I'm agree that this approach might be error prone if one works with deeply nested & all-levels fully optional objects/arrays (which isn't the most common use case in the world by the way) but do you think it may anyhow affect the rendering performance?

I mean, it seems unlikely that someone would just accidentially stitch in all DOOM engine logic re-written & adapted for JS in-between the <If></If>, isn't it?

[Anxiny]

I just don't like the {...} things inside my JSX, it just doesn't look nice in terms of format.

[cyrstron]

IMO, the best way of doing that is this pattern

    condition && (
        <Component />
    )

Much more concise, decently readable and short circuit saves some resources and possible runtime errors with not evaluating jsx.

[Anxiny]

Yes, it will cause an error. But it helps you write code in a more clean way. For example:

Since you will get an error by doing this way.

export default function App() {
  const [person, setData] = useState(null);

  return (
    <div className="App">
      <If condition={person}>
        <h4>{person.name}</h4>
        <p>{person.bio}</p>
        <ul>
          {person.attrs.map(({ name, value }) => {
            return <li key={name}>{value}</li>;
          })}
        </ul>
      </If>
    </div>
  );
}

It forced you to do things like this which results a cleaner code:

export default function App() {
  const [person, setData] = useState(null);

  return (
    <div className="App">
      <If condition={person}>
        <PersonCard person={person} />
        <OtherThingThatUsePerson person={person}/>
      </If>
    </div>
  );
}

function PersonCard({ person }) {
  return (
    <div>
      <h4>{person.name}</h4>
      <p>{person.bio}</p>
      <ul>
        {person.attrs.map(({ name, value }) => {
          return <li key={name}>{value}</li>;
        })}
      </ul>
    </div>
  );
}

Also, you can always check each property, but that is not recommended

<If condition={person.name}>...</If>

[Coder Kwan]

thanks. this opened my eyes

[Hendrik Volschenk]

I agree with @lukeshiru - This solution is really expensive. If you want to do this I would highly suggest you use a render prop.

[Anxiny]

Thanks for the feedback.
I don't think is good idea to put heavy task in the render return anyway so the performance does not suffer much by having a If wrappers.

If you have a case that may cause performance issue, please let me know

[Anxiny]

Yes, the statement in <If/> will be evaluated, but I feel it is minor problem that can be avoid, for example, enclosing the statement inside the child component.

Thanks for point this out!

[Lukas Elmer]

Beside the performance issue, this can be an issue if you check in the condition a precondition for the rendering (e.g. if an object exists), and in the rendering part you depend on this check (e.g. access properties of this object).

E.g. let post: Post | undefined
Check in the condition if post !== undefined
Render post.title if the condition is true