How to distinguish what caused rendering of React component: something from the inside or from the outside of the component?

Question

I have two nested react components: Outer and Inner. Whenever I call setState of Inner, render of inner component gets invoked. Also, whenever I call setState of outer component, render functions of both outer and inner components gets invoked. I would like to distinguish those two cases and detect what coused rendering of the inner component. My render function of Inner should behave differently depending on that. How can I do that?

Answer 1

You can make use of the fact that the componentWillReceiveProps is only called when the component is receiving new props (check out here: http://busypeoples.github.io/post/react-component-lifecycle/), not when setState is called, and importantly they don't even have to be different props than the existing ones (per https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops). So you should be able to do something along the lines of

componentWillReceiveProps() {
  this.setState({parentUpdated: true});
}

render() {
  if (this.state.parentUpdated) {
    // Render one way
  } else {
    // Render the other way
  }
}

Although you would also need to unset that after the render somehow, or just ensure that every call to this.setState also includes {parentUpdated: false}.