When conditionally rendering, would it be better to show and remove via display: none

<View style={{display: props.shouldShow ? 'flex':'none'}}>
     ......
</View>

OR

would it be better to call a function like so:

const showComponent = (props) => {
    if (props.shouldShow)
    {
        return (<View> ... </View)

    }
    else
    {
        return
    }

}
...
...
const Thingy = (props) => {
    return(
        <View>
            showComponent(props)
        </View>
    )
}

When conditionally rendering, would it be better to show and remove via display: none

<View style={{display: props.shouldShow ? 'flex':'none'}}>
     ......
</View>

OR

would it be better to call a function like so:

const showComponent = (props) => {
    if (props.shouldShow)
    {
        return (<View> ... </View)

    }
    else
    {
        return
    }

}
...
...
const Thingy = (props) => {
    return(
        <View>
            showComponent(props)
        </View>
    )
}

• javascript
• reactjs
• react-native
• user-interface
• frontend

Share Improve this question Follow asked Nov 19, 2019 at 20:02 Jake ChambersJake Chambers 56322 gold badges88 silver badges2525 bronze badges 1

• Do you mean better in performance? – Jose Rojas Commented Nov 19, 2019 at 20:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

The example you provided where you return the <View></View> or null is more idiomatic to react than toggling the style via display.

If it's a matter of display or no display I usually fall back to ternary expressions.

render(){
  let display = ( ...some expression )
  return(
    display ? <View>Hello</View > : null
  );
}

Returning null will not render anything.

From personal experience and react projects i have seen, An efficient / trusted way to conditionally render a ponent is

const showComponent = props.shouldShow ? (<View>...</View>) : null

return(
   <div>
      {showComponent}
   </div>

If you are Using Functional Component, The latest Approach then its much more easy as,

return (
<View style={Condition ? Styles.A : Styles.B}>

</View>

)
const Styles = StyleSheet.create({ A: { display:"none" }, B:{ display:"flex" } } )

Rest you have to look into functional ponent