9

What's the de facto approach to choosing between conditional rendering or hiding the component with { display: 'none' }?

For the sake of discussion, let's say that I have a FilterComponent that holds the title of the filter, and a list of FilterItems, with name and amount.

In short, a FilterComponent could be:

Color

  • Blue (19)

  • Yellow (17)

  • Orange (3)

  • Black (7)

  • Green (10)

    + Show More

When hitting Show More button, more FilterItems will be displayed, i.e.

Color

  • Blue (19)

  • Yellow (17)

  • Orange (3)

  • Black (7)

  • Green (10)

  • Brown (17)

  • Pink (88)

  • White (55)

  • Red (32)

  • Purple (17)

    - Show Less

Should I hide the FilterItems that are below the Show More? Or should I return null for those below and render them after updating the state with Show More?

Community
  • 1
  • 1
fasaas
  • 592
  • 1
  • 6
  • 23

9 Answers9

12

I think there are a few ways to accomplish what you need. However, this seems to be the most practised:

{myConditionIsTrue && <MyComponent />}

In your case, it makes sense to use state. I would have a prop inside FilterComponent called showFullList

{this.state.showFullList && (
 <React.Fragment>
   <All/><The/><Other/><Components/>
</React.Fragment>)}

Just be weary, this mechanism is actually removing/adding to the DOM.

Neal
  • 573
  • 3
  • 16
3

Generally in React it is better to not render something than to render it as hidden. Here is one related discussion: https://discuss.reactjs.org/t/conditional-rendering-or-toggling-hidden-classes/2535/6

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
1

I would go for the "updating state" approach. That way you always have the actual filterItems that is showing in the state. So your components state is in sync and represents the current UI that is showing.

Guess there's no right or wrong in this question though =)

weibenfalk
  • 892
  • 7
  • 10
1

It would make more sense to not render the items that should not be shown until after the Show More has been clicked, and the state has updated. This way you can handle how many items should be shown by default before clicking Show More. This way instead of applying inline styles, or a special class to certain elements, you can use the exact same logic to all FilterItems, but only render X of them.

Naismith
  • 235
  • 2
  • 9
1

You can change initial state value of isHidden or something like that . When you click button value will be oppasite of before situtation . And when you wants to render you should give condition ; 

{ isHidden &&

...
Alican Çelik
  • 53
  • 2
  • 7
1

My prefer two methodes:

#1 Element Variables

const button = <LogoutButton onClick={this.handleLogoutClick} />;

<div>
    <Greeting isLoggedIn={isLoggedIn} />
    {button}
</div>

2# Inline If with Logical && Operator

{unreadMessages.length > 0 &&
    <h2>
        You have {unreadMessages.length} unread messages.
    </h2>
}

More details here: https://reactjs.org/docs/conditional-rendering.html

Abdelhadi Abdo
  • 392
  • 2
  • 9
0

Generally, there is no significant performance differences between display: none and conditional rendering, because the browser's behaviour in both cases is nearly the same. The main difference is that if you use display: none, then node is not removing from the DOM tree, which forces some CSS pseudo-selectors like :last-child to consider a hidden node as last-child and so on. So, it is not performance-related, but mostly CSS-related. Both of approaches are ok for use, I suppose :)

Limbo
  • 2,123
  • 21
  • 41
0

An other approach based on Array.prototype.slice() method

The usage in parent component

import React from "react";
import { ColorList } from "./Color";

export default function App() {
  return <ColorList colors={["red", "green", "blue"]} visibleItemsCount={1} />;
}

And the ColorList component looks like this:

import React from "react";

// This is just a placeholder component :)
function Color({ color }) {
  return <div style={{ color }}>{color}</div>;
}

export function ColorList({ colors, visibleItemsCount = 0 }) {
  const [showMore, setShowMore] = React.useState(false);

  // Toggle value on click button
  const onClick = () => setShowMore((value) => !value);

  // Memoize the color list when props changed
  const visibleColors = React.useMemo(() => {
    // If show more items, return the whole array
    // Otherwise, return a sliced array based on visible items
    const count = showMore ? colors.count : visibleItemsCount;
    return colors.slice(0, count);
  }, [colors, visibleItemsCount, showMore]);

  console.log(visibleColors);
  return (
    <>
      <h1>Color list</h1>
      <>
        {visibleColors.map((color) => (
          <Color key={color} color={color} />
        ))}
      </>
      <button onClick={onClick}>{showMore ? "Show less" : "Show more"}</button>
    </>
  );
}

Note: I uploaded the code on CodeSandbox, you can check it here

Tolotra Raharison
  • 3,034
  • 1
  • 10
  • 15
-1

You could use a library called react-if. This library helps you wether to render or not based on a a condition.

Here is an example:

const Bar = ({ name, age, drinkingAge }) => (
    <div>
        <Header />
        <If condition={ age >= drinkingAge }>
            <Then><span className="ok">Have a beer, {name}!</span></Then>
            <Else><span className="not-ok">Sorry, {name}, you are not old enough.</span></Else>
        </If>
        <Footer />
    </div> )
Ramiro Estrella
  • 1
  • 1