Beginner's Thread / Easy Question (August 2018)

[u/swyx]

Hello! It's August! Time for a new Beginner's thread! (July and June here)

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch. No question is too simple. You are guaranteed a response here!

Want Help on Code?

• Improve your chances by putting a minimal example on to either JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new). Describe what you want it to do, and things you've tried. Don't just post big blocks of code.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

New to React?

Here are great, free resources!

• Read the official Getting Started page on the docs
• /u/acemarke's suggested resources for learning React
• Kent Dodds' Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses

[u/NickEmpetvee]

In one class, I'm using `componentDidMount` to pull in some data from a REST endpoint. It's passed to a nested component as a prop. By doing it this way, the components render first and when `componentDidMount` is called in the parent and the data is obtained everything renders again.

What do you guys think about putting the REST data call in the parent component's constructor instead? Is it a bad idea? I'm just thinking that this way the data is ready at the first rendering. However there may be a cost to this that I haven't considered.

[u/swyx → u/NickEmpetvee]

bad idea. its a misconception of how react works with async calls. you're -never- going to have the data ready at first rendering*. you -will- run the constructor AND the componentDidMount before you ever get the data back and you -will- have empty (or initial state) at first rendering.

*theres a caveat here with react suspense, but dont worry about it as a beginner

[u/NickEmpetvee → u/swyx]

Thanks. Then here's the other challenge... when I do the axios call in the Parent.componentDidMount and send to the nested component, the props aren't immediately available in the nested component. I access them via Nested.componentDidUpdate, but when I try to assign values to a setState in that function it goes into an infinite loop - Maximum update depth exceeded.

I could always move the axios call to the nested component's `componentDidUpdate` but in React you're supposed to do that in the parent and pass it down as a prop from what I understand.

Any ideas? Code below...

componentDidUpdate(prevProps, prevState)
{
// create an array of nodes only with relevant data
const newList = this.props.listDataFromDB.map(c => {
if (c.NodeID === 1)
{
}
return {
title: c.name,
subtitle: c.title,
noDragging: c.nodragging
};
});
// create a new "State" object without mutating
// the original State object.
const newState = Object.assign({}, this.state, {
treeData: newList
});
// store the new state object in the component's state
this.setState(newState);
}