3

I have recently discovered an alternative to conditionally rendering a component 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 component state and have the functionality of toggling the visibility of the components UI.

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

2
  • 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 computers 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
    Apr 19, 2020 at 19:29
  • Truth is, all the code will be executed, wasting time in that component that is intended to be hidden... because hidden attribute only hides the component from view. Apr 19, 2020 at 19:40

2 Answers 2

5

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.

0

I think this is worth mentioning. hidden attribute acts more or less like display: none with css. The truth is "the component 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 components in react where they will all be rendered but only displayed based on that hidden attribute.

enter image description here

Well I may not be sure of the performance involved but it's obvious that doign a simple if() to condition render a component will depending on the size of your components 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 component which is intended to be hidden.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.