VikR VikR - 2 months ago 14
React JSX Question

React: What Controls Value of this.props.loading?

I have several React containers and components running perfectly, but I'm still studying and learning React. When my function componentDidMount runs in a new component I'm working on, it appears that all the data my component needs is available to the component, but

this.props.loading
is set to
true
;

componentDidMount() {
const a = 100; //breakpoint here
if (this.props.loading === false){
const {myDataID} = this.props;
this.fromID = Meteor.userId();
this.toID = myDataID;

this.subscribe(fromID, toID);
}
}


What controls the value in
this.props.loading
? Will componentDidMount run again if
this.props.loading
is set to false?

Answer

The prop, this.props.loading is set by the parent component. If you feel your component has all the necessary data to perform a render you don't need to check if this.props.loading is true or false. It's a good practice to have this check because some times due to network errors you might not get the data you needed. This will break your code.

componentDidMount will only be called once after the render function is done

Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

But, when you change the loading prop in the parent, componentWillReceiveProps will be called with the nexProp, which is your change.

For more info, check here

Comments