reactjs - Handling rendering before async completes -

having async action creator in componentwillmount takes time complete,

in meanwhile, component rendered once or twice without data provided until reducer changes state , contain it,

please clarify best way handle initial component render(s) has no data yet,

i find myself doing things like:

render() {    if (!this.props.item) return <div></div>    // fails during initial renders without if condition above.    const { item: { foo: { bar } } } = this.props } 

i know can have default state in mapstatetoprops won't work when entities (such item.foo.bar) have nested fields.

thanks.

i think should use mapstatetoprops map item of state(redux) item in props. such as, when async task done item in props automatically change. when props changed, component render againt.

in render function, can implement:

render(){   {     !this.props.item ? <div>no data</div>      : <div>         item.foo.bar       </div>   } }