layout use controlled and cached attributes together and drag the head quickly, an error occurred

[jin-qiaojin]

https://codesandbox.io/s/billowing-breeze-3yydw8?file=/src/App.js

[RobertCLian]

I meet with the same issue, drag the head quickly for few times and updateTabCache will cause a loop render.

UIErrorBoundaryPanel's componentDidCatch Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at checkForNestedUpdates (react-dom.development.js:27291:1)
at scheduleUpdateOnFiber (react-dom.development.js:25474:1)
at Object.enqueueForceUpdate (react-dom.development.js:14119:1)
at Component.forceUpdate (react.development.js:372:1)
at DockLayout.updateTabCache (DockLayout.js:74:1)
at DockTabPane.updateCache (DockTabPane.js:23:1)
at DockTabPane.componentDidUpdate (DockTabPane.js:62:1)
at commitLayoutEffectOnFiber (react-dom.development.js:23332:1)
at commitLayoutMountEffects_complete (react-dom.development.js:24687:1)
at commitLayoutEffects_begin (react-dom.development.js:24673:1)