Faster way to show/hide ReactJS components? Toggle component or toggle display?

Question

Consider <MenuComponent /> is the reusable component. Which code perform better in this scenario.

Option 1

render() {
   return this.state.shouldHidden ? null : <MenuComponent />
}

Option 2

render() {
   return <MenuComponent hidden={this.state.shouldHidden}/>
}

Possible duplicate of Correct way to hide components in React.js — Amid
– Amid, Commented Jun 19, 2017 at 6:01

webdeb · Accepted Answer · 2017-06-19 01:29:15Z

1

Obviously 1. because if hidden at least one function call can be avoided.

But, seriously, it will save you only some microseconds.
Never forget: premature optimization is the root of all evil :)

answered Jun 19, 2017 at 1:29

webdeb

13.3k5 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

If think of 'reflow'?