React performance affected by nested component constructor call?

#react #javascript #frontend

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?