React performance affected by nested component constructor call?

Hell all,

Does performing the conditional render logic in the render method affect performance?
Because if i do the condition render logic outside the component it will not call the nested components constructor.

Example:
Page
item text="data"
item text="data"
item text=""
Page

inside page component conditional logic {data && <item text="data"}

basically if this item has data it will render else it wont. So if no data being passed the item constructor will not be called.

This is standard however I prefer to put the conditional check inside my component like this:

inside item component
render(){
if(!props.text){
return null
}
return div{props.text}div
}

This will however call the constructor and life cycle methods of List component. I want to do it this way because it makes the component more reusable and dont have to keep writing the conditional rendering logic outside the component.

Will it be a big performance hit?
I am aware of ShouldComponentUpdate however the first render may be slow right?

Comments

[Niklas H]

It's just an extra function call, so the performance impact should be minimal.

But, just to be sure, you could set up a list of 100K elements and see if I am right or have no clue what I am talking about.

Good Luck

[bronxsystem]

anyone :(