长时间延迟后打开弹出窗口（ReactJS性能问题）

Question

我正在修复React应用程序中的一些错误。问题之一是，弹出窗口在单击“打开”按钮后的12秒后打开。但我不确定是什么引起了问题。这里没有网络请求正在播放。这是伪代码：

class ComponentA extends React.Component {
    state = { isOpen: false } 
    handleClick = () => {
        this.setState({ isOpen: true})
    }

    // lots of methods

    render() {
        return (
            <div>
                // lots of other JSX
                <Button onClick={this.handleClick}
                <Popup visible={this.state.isOpen}/>
            </div>
        )
    }
}

ComponentA实际上是一个很大的组成部分，我怀疑这可能是速度缓慢的原因。但是考虑到React使用虚拟DOM，这应该还是一个问题吗？即使对于大型应用程序，虚拟DOM仍然需要2-3秒来计算差异，但是12秒？

编辑：我在Chrome中进行了性能审核，记录了我单击按钮到屏幕上弹出窗口之间的活动。这是输出：

我不确定scripting在这里指的是什么。我认为对JavaScript的所有解析（通常被称为scripting）都是在下载脚本后完成的。但是在这里，Popup是在页面加载后很长时间打开的，单击Button不会下载任何新脚本。如果scripting在这里是executing的意思，那么rendering在上图中指的是什么？