Simplify condition rendering in React.js

As a professional developer you are forced to stay up to date with the latest trends in technology. This year I've added Svelte to my bucket list as a new framework to learn.
While researching Svelte I was surprised by the way they handle condition rendering.
Take a look at this example found in their docs:

{#if user.loggedIn}
      <button on:click={toggle}>
        Log out
      </button>
    {/if}

Everything is neatly wrapped with if clause and separated from normal flow.

After a quick prototyping I present to you the most powerful component I have ever written, an IF component.

const IF = ({ condition, children }) => {
     if (!condition) return null;
     return <>{children}</>;
   };

By offloading condition into a separate component this will improve code cleanness and readability by quite a margin (for free).

Let’s imagine the Svelte example in our React app. It would go something like this:

…
return (
    <>
      {user.loggedIn && <button>Log out</button>}
    </>
  );
...

This is not an end of the world issue when you have just one condition but as our apps grow, so do the conditions.

Take a look at the same component now refactored to use IF:

…
return (
    <IF condition={user.loggedIn}>
      <button>Log out</button>
    </IF>
  );
...

Now it’s easier to track down conditions and debug faulty ones, plus the code looks way cleaner now that conditions are gone from JSX.

Hope you found this helpful ❤️