What is correct lifecycle method in React 16.3 to update canvas from props?

Question

I have a Canvas component, which looks approximately like this:

<

Answer 1

I found this because I had a sort of similar problem but not completely the same. The solution that works for me is just to put all the relevant code in shouldComponentUpdate:

(the if statement used to be in componentWillReceiveProps)

  shouldComponentUpdate (nextProps, nextState) { // no more random renders
    if (
      (nextProps.nightMode !== this.props.nightMode) ||
      (nextProps.language  !== this.props.language)
    ) {
      this.props.setRefresh(true)                       // setTimeout means after current operation
      setTimeout(() => this.props.setRefresh(false), 1) // so loading will show for longer than 1ms
    }

    return this.props.refresh !== nextProps.refresh
  }