To my understanding, on first render, componentDidMount() is not called and isLoading is false even though data has not been loaded yet. This could leave you with undefined state on initial render. For example, I make an API call that returns an array, and set a variable const returnedData = data in my App component. My data will not be loaded yet, so the client will not render a loading message and also throw an error at returnedData.map(...) because it will think returnedData is a valid object.
The solution would be setting isLoading = true in the constructor, which will properly display a loading message until data is loaded.
p.s. Thank you for making these awesome tutorials! I found this and your post on higher order components really beneficial .
To my understanding, on first render,
componentDidMount()is not called andisLoadingis false even though data has not been loaded yet. This could leave you with undefined state on initial render. For example, I make an API call that returns an array, and set a variableconst returnedData = datain my App component. My data will not be loaded yet, so the client will not render a loading message and also throw an error atreturnedData.map(...)because it will thinkreturnedDatais a valid object.The solution would be setting
isLoading = truein the constructor, which will properly display a loading message until data is loaded.p.s. Thank you for making these awesome tutorials! I found this and your post on higher order components really beneficial .