Discussion on: A Clean Way to Conditionally Render Components

[Lou Cyx]

This will still render the components inside, so if those depend on the condition, you'll still get errors. Not to mention performance is worsen as well. You can verify this by adding a log to the components inside If and setting the condition to false.

Cheers!

[Anxiny]

Thanks for the feedback!
I'm not sure if I understand you reply correctly, but here is demo that shows the child component will not be rendered unless the condition is true.

codesandbox.io/s/if-component-demo...

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

  return (
    <div className="App">
      {data ? <Child name="A" /> : <Child name="NO DATA" />}
      <If condition={data}>
        <Child name="Has Data" />
      </If>
      <If condition={data}>
        <ChildNeedsData data={data} />
      </If>
    </div>
  );
}

function Child(props) {
  useEffect(() => {
    console.log(`Child ${props.name} is rendered`);
    return () => console.log(`Child ${props.name} is unmounted`);
  }, []);
  console.log(`Child ${props.name} is rendering`);
  return <div>Child {props.name}</div>;
}

function ChildNeedsData(props) {
  return <h4>{props.data.name}</h4>;
}

Output

Child NO DATA is rendering 
Child NO DATA is rendered 
// No Error while running is demo

If you change the code to this:

      <If condition={!data}>
        <ChildNeedsData data={data} />
      </If>

You will get a error.

[Lou Cyx]

I was talking about this ... with a ternary you don't run the code inside the "if", but with an If component you do, because the content of an If component will be evaluated. If you want to use JSX like this, you can use Solid JS which afaik allows you to do stuff like this ^_^

[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

[Lou Cyx]

Nowadays you "solve" that with optional chaining, but yeah, the important thing here is that the content of If is evaluated, and that wouldn't happen with a ternary.

[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>

[Lou Cyx]

Instead of having a component, you could have an util:

const when = (condition, render) =>
    condition ? render(condition) : undefined;

And then you use it like this:

<div>
    {when(title, () => (
        <h1>{title}</h1>
    )}
</div>

Behaves similarly to your If component, but it only calls render if condition is truthy, so there's a lot of issues you wouldn't have :D

[Anxiny]

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

[Lou Cyx]

JSX will always end up with {...} somewhere. You can always use stuff like Svelte, that already includes "if" in their templating ☺️

[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

[Lou Cyx]

If you understand the underlying code for React, then this is no surprise. When you write:

import { Fragment } from "react";

const If = ({ children, condition }) =>
    condition ? <Fragment>{children}</Fragment> : undefined;

const DisplayData = ({ data }) => <Fragment>{data}</Fragment>;

const data = undefined;

export default (
    <If condition={data}>
        <DisplayData data={data} />
    </If>
);

You're actually writing this:

import { jsx } from "react/jsx-runtime";
import { Fragment } from "react";

const If = ({ children, condition }) =>
    condition ? jsx(Fragment, { children }) : undefined;

const DisplayData = ({ data }) => jsx(Fragment, { children: data });

const data = undefined;

// The important bit:
export default jsx(If, {
    condition: data,
    children: jsx(DisplayData, { data }),
});

Compared to doing it with a ternary like this:

import { Fragment } from "react";

const DisplayData = ({ data }) => <Fragment>{data}</Fragment>;

const data = undefined;

export default data ? <DisplayData data={data} /> : undefined;

That's like writing this:

import { jsx } from "react/jsx-runtime";
import { Fragment } from "react";

const DisplayData = ({ data }) => jsx(Fragment, { children: data });

const data = undefined;

// The important bit:
export default data ? jsx(DisplayData, { data }) : undefined;

With If you always call jsx with DisplayData passing data, without If you only do that call if data exists, if not you don't do anything.

[Anxiny]

If you mean the render of <If/> component will be executed regardless of the condition, that is true. But I don't think it will cause any error itself.

For performance, so far I don't feel any drawback of using this approach since it does not render its children when condition if false as I mentioned previously.
It should be very similar to the <Route/> in React-Router.

Best

[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?

[Lou Cyx]

You don't have to take my word for this (even when I did this in the past, realized it was a mistake and stopped doing it), you can just google this "If" component approach. I'm not the only one that knows this isn't ideal because you're evaluating branches of logic even when you aren't actually going into them.