reactjs - approaches for short circuiting render() based on state property availability?

Question

As a best practice, all data needed by a component should be retrieved in the componentDidMount() event. This data should be set into state via this.setState() in componentDidMount() and then deconstructed out of state at the top of the render() method. I'm familiar with the approach of guard style rendering like this:

{userName && <div>Welcome {userName}!</div>}

But is there an easy way to short circuit the entire return of jsx if the data isn't available? For example:

render(){

if(!this.state.MyComponentData) return;

return(
  //full component jsx
);

}

Does the more granular guard-style rendering approach provide an overall faster render and better UX than some type of full short-circuit like the example that I provided above? Is there a particular name for this particular UI architectural style/approach?

Answer 1

等待大神答复