I have recently discovered an alternative to conditionally rendering a ponent in JSX, which is to use the hidden HTML attribute.

Example

function Parent() {
  return {!hideChild && <Child />}
}

vs

function Parent() {
  return <Child hidden={hideChild} />
}

function Child({ hidden }) {
  return (
    <div hidden={hidden} >
      //my content
    </div>
  )
}

So far I have not noticed any performance or alike issues when using hidden. In saying that, are there any downsides to have lots of HTML on the page that is hidden?

For me, this approach has served well when I want to retain the ponent state and have the functionality of toggling the visibility of the ponents UI.

Is this bad practice? Should we be conditionally rendering ponents instead?

I have recently discovered an alternative to conditionally rendering a ponent in JSX, which is to use the hidden HTML attribute.

Example

function Parent() {
  return {!hideChild && <Child />}
}

vs

function Parent() {
  return <Child hidden={hideChild} />
}

function Child({ hidden }) {
  return (
    <div hidden={hidden} >
      //my content
    </div>
  )
}

So far I have not noticed any performance or alike issues when using hidden. In saying that, are there any downsides to have lots of HTML on the page that is hidden?

For me, this approach has served well when I want to retain the ponent state and have the functionality of toggling the visibility of the ponents UI.

Is this bad practice? Should we be conditionally rendering ponents instead?

• javascript
• html
• reactjs

• I think conditionally rendering should be fine unless you have a noticeable lag. If you target low end devices then that lag may not be noticeable on your dev puters but visitors of your app will notice so be sure to test it. If you want to maintain state even after unmount and between routes then you can use context or redux. – HMR Commented Apr 19, 2020 at 19:29
• Truth is, all the code will be executed, wasting time in that ponent that is intended to be hidden... because hidden attribute only hides the ponent from view. – Mosia Thabo Commented Apr 19, 2020 at 19:40

2 Answers 2

The difference is that when using conditional rendering, the logic inside the conditionally rendered UI will not be executed if the condition fails.

But using the hidden attribute will execute the logic but only hides the UI.

Example:

import React from 'react';

const A = () => {
  console.log('A rendrerd');
  return <h1>A</h1>;
};

const B = ({ hidden }) => {
  console.log('B rendrerd');
  return <h1 hidden={hidden}>B</h1>;
};

const Test = () => {
  return (
    <div>
      {false && <A />}
      <B hidden={true} />
    </div>
  );
};

export default Test;

A will never call its console.log statement. B is hidden but it will log B rendered.

I think this is worth mentioning. hidden attribute acts more or less like display: none with css. The truth is "the ponent will be rendered but only hidden from your display."

Just to illustrate, below is a photo of some html and their output. you realize that the output doesn't show the <p> that is decorated with hidden attribute but if when you inspect the rendered code, you realize that <p> was actually renderd. So you can image have multiple ponents in react where they will all be rendered but only displayed based on that hidden attribute.

Well I may not be sure of the performance involved but it's obvious that doign a simple if() to condition render a ponent will depending on the size of your ponents be much quicker than rendering everything and only relying on their hidden attribute decoration. And this also means that a user can just Inspect element and remove hidden attribute to display that ponent which is intended to be hidden.