Discussion on: A Clean Way to Conditionally Render Components

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