CODEWITHSUNDEEP
javascriptarraysreactjsecmascript-6
Palaniichuk Dmytro
Palaniichuk Dmytro

Reputation: 3173

Optimize render React Components depends on props

I've got a component that renders depends on props I pass to it. Previously I used logical operators OR, but when becomes more props it looks ugly, and I switched all these to array with Array.prototype.some method. Do you know how to do it better or some best practice for that?

Before:

<Wrapper>
{(props1 || props2 || props3 || props4) && <Component/>}
</Wrapper>

After:

<Wrapper>
{[props1, props2, props3, props4].some(x => x) && <Component/>}
</Wrapper>

Upvotes: 0

Views: 69

Answers (1)

William
William

Reputation: 600

depending on how the props are passed you could use a spread operateur

<Wrapper>
{...this.props.someArray.some(x => x) && <Component/>}
</Wrapper>

there is no one solution to the problem however, you could use Redux (and its alternatives) to manage the global rendering of a component via the global store. If your concern is more about having to use arrays of props to render then it could be good at looking at other data structures such as Maps.

The react philosophy tries to push for reusable components were possible. The best way is to use stateless components as much as possible and handled all the rendering logic in a smart parent component. So maybe look at putting the logic in the parent component.

Upvotes: 1

Related Questions