Breadcrumbs, OverflowList: Support React Strict Mode

[tony]

Originally references in #3361.

(I am new to blueprint, sorry if I missed anything!)

Environment

• Package version(s): 3.19.1
• Browser and OS versions: Ubuntu 19.10, Chrome Version 78.0.3904.70 (Official Build) (64-bit)

No fork, but the life example on docs give this warning (as of Oct 27th, 2019): https://blueprintjs.com/docs/#core/components/breadcrumbs

Steps to reproduce

1. Use example in breadcrumb docs: https://blueprintjs.com/docs/#core/components/breadcrumbs
2. Load breadcrumbs

Actual behavior

react-dom.development.js:530 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Blueprint3.ResizeSensor which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in ul (created by Blueprint3.OverflowList)
    in Blueprint3.ResizeSensor (created by Blueprint3.OverflowList)
    in Blueprint3.OverflowList (created by Breadcrumbs)
    in Breadcrumbs (at Layout.tsx:29)
    in BreadcrumbBar (at Layout.tsx:63)
    in main (at Layout.tsx:62)
    in Layout (at HSK.tsx:55)
    in HashScroll (created by NaviProvider)
    in NaviProvider (created by Router)
    in Router (at HSK.tsx:54)
    in HelmetProvider (created by NaviHelmetProvider)
    in NaviHelmetProvider (at HSK.tsx:53)
    in StrictMode (at HSK.tsx:52)
    in RelayEnvironmentProvider (at HSK.tsx:51)
    in App (at HSK.tsx:65)

Expected behavior

No warning when wrapped in React.StrictMode

Possible solution

Not sure yet, docs mention something about passing in a reference https://fb.me/react-strict-mode-find-node

[orlowang]

same issues
deps "@blueprintjs/core": "^3.22.3"

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in div (created by Blueprint3.Overlay)
    in Transition (created by CSSTransition)
    in CSSTransition (created by Blueprint3.Overlay)
    in div (created by TransitionGroup)
    in TransitionGroup (created by Blueprint3.Overlay)
    in Blueprint3.Portal (created by Blueprint3.Overlay)
    in Blueprint3.Overlay (created by Blueprint3.Dialog)
    in Blueprint3.Dialog (at add-video-type.js:59)
    in AddVideoType (at resource/index.js:17)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (at resource/index.js:15)
    in div (at resource/index.js:9)
    in Resource (at pages/index.js:180)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (at router.js:9)
    in Router (at pages/index.js:179)
    in Root (at src/index.js:15)
    in Suspense (at src/index.js:14)
    in RelayEnvironmentProvider (at src/index.js:13)
    in App (at src/index.js:22)

I don't know if the above error caused the following error

Uncaught 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:25787)
    at scheduleUpdateOnFiber (react-dom.development.js:23788)
    at dispatchAction (react-dom.development.js:17124)
    at usePagination.js:99
    at publicUtils.js:184
    at commitHookEffectList (react-dom.development.js:22123)
    at commitLifeCycles (react-dom.development.js:22173)
    at commitLayoutEffects (react-dom.development.js:25460)
    at HTMLUnknownElement.callCallback (react-dom.development.js:413)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:462)
    at invokeGuardedCallback (react-dom.development.js:517)
    at commitRootImpl (react-dom.development.js:25198)
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12255)
    at commitRoot (react-dom.development.js:25038)
    at finishSyncRender (react-dom.development.js:24443)
    at performSyncWorkOnRoot (react-dom.development.js:24422)
    at react-dom.development.js:12305
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12255)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12300)
    at flushSyncCallbackQueue (react-dom.development.js:12288)
    at commitRootImpl (react-dom.development.js:25334)
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12255)
    at commitRoot (react-dom.development.js:25038)
    at finishConcurrentRender (react-dom.development.js:24338)
    at performConcurrentWorkOnRoot (react-dom.development.js:24113)
    at workLoop (scheduler.development.js:645)
    at flushWork (scheduler.development.js:600)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:206)

[adidahiya]

closing in favor of #3979, which has more information and some concrete proposals