Warning: scheduling a cascading update

[rleir]

Current Behavior
A clear and concise description of what is happening / what the bug is.
@jameshadfield James: This issue is a question not a bug report. Thanks -- Rick
In tree.js ( auspice/src/components/tree/tree.js )
componentDidMount() calls new PhyloTree(this.props.tree.nodes, "LEFT");
Why is this not called in the constructor? This is being done after the component has been put in the DOM. You must have a reason for this.

componentDidMount() {
    if (this.props.tree.loaded) {
      const newState = {};
      newState.tree = new PhyloTree(this.props.tree.nodes, "LEFT");
      renderTree(this, true, newState.tree, this.props);
      if (this.props.showTreeToo) {
        this.setUpAndRenderTreeToo(this.props, newState); /* modifies newState in place */
      }
      this.setState(newState); /* this will trigger an unneccessary CDU :( */
    }
  }

The Chrome performance tool gives us this:

At the top-right, see the 'do not enter' sign. At the bottom, see "Tree.componentDidMount Warning: scheduling a cascading update". Cascading means that an update just completed, and we immediately call setState to schedule a new update.
After the "do not enter" sign, off to the right, the script continues to execute long after the tree is displayed.

Expected behavior
A clear and concise description of what you expected to happen instead.
Please tell me what discussions you have had about the tree component, maybe this has something to do with the 'Right' tree?

How to reproduce
Steps to reproduce the current behavior:

1. Open / run ...
4. See error

Possible solution
(optional)

Your environment: if browsing Nextstrain online

• Operating system:
• Browser:
  http://localhost:4000/ncov/north-america
  Ubuntu, Chrome

Your environment: if running Nextstrain locally

• Operating system:
• Browser:
• Version (e.g. auspice 2.7.0):
  2.15.0

Additional context
Add any other context about the problem here.

[jameshadfield]

The reason it's in componentDidMount not the constructor is that the DOM element which renderTree will render the tree into is created (by react) after the constructor code is run.

The Phylotree object might be able to be created in the constructor, but the tree cannot be rendered there. Placing all the code in componentDidMount seemed the simplest way to reason with this.

[jameshadfield]

Thanks for looking into this! Lots of performance improvements to be had here :)

[rleir]

James, thanks for the info. Let's link this to #955

All: The 'bug' label gets added automatically. Just saying this in case someone did not know.