How do I stop a component rendering before data is fetched?

Question

Currently in react I have to functions in the componentDidMount lifecycle method in which call action creators to which fetch data. The component uses the data however, dependin

Answer 1

In your constructor, declare a state variable to track if data is loaded. For example:

constructor (props) {
  super(props)
  this.state = {
    dataLoaded: false
  }
}

Then in your render method, return null if this.state.dataLoaded is false:

render () {
  const { dataLoaded } = this.state
  return (
    

      {
        dataLoaded &&
        
      }
    
  )
}

And in the methods you use to fetch data, make sure you call this.setState({ dataLoaded: true }) when data has been fetched