Reactivesearch: Issue with SingleDropdownList react prop - Error: Maximum update depth exceeded

[davkap92]

Issue Type:
Bug

Platform:
Web

Description:
I think may be a similar Issue to #271 but for a different Component.
Error: Maximum update depth exceeded.

Screenshots:

Minimal reproduction of the problem with instructions:
Use a SingleDropdownList component, add react prop and reference another component.

Reactivesearch version: 2.3.3

Stacktrace
``` react-dom.development.js:9747 The above error occurred in the component:
in SingleDropdownList (created by Connect(SingleDropdownList))
in Connect(SingleDropdownList) (created by SearchFilters)
in div (created by Styled(div))
in Styled(div) (created by SearchFilters)
in div (created by Styled(div))
in Styled(div) (created by SearchFilters)
in SearchFilters (created by ResultsPage)
in div (created by Styled(div))
in Styled(div) (created by ResultsPage)
in div (created by Styled(div))
in Styled(div) (created by ResultsPage)
in div (created by Styled(div))
in Styled(div) (created by URLParamsProvider)
in URLParamsProvider (created by Connect(URLParamsProvider))
in Connect(URLParamsProvider) (created by ReactiveBase)
in Provider (created by ReactiveBase)
in ThemeProvider (created by ReactiveBase)
in ReactiveBase (created by ResultsPage)
in section (created by Styled(section))
in Styled(section) (created by ResultsPage)
in ResultsPage (created by Route)
in Route (created by App)
in Switch (created by App)
in Router (created by App)
in App

React will try to recreate this component tree from scratch using the error boundary you provided, ReactiveBase.
logCapturedError @ react-dom.development.js:9747
captureError @ react-dom.development.js:10540
renderRoot @ react-dom.development.js:10391
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
Component.setState @ react.development.js:237
onStateChange @ connectAdvanced.js:205
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:65
onStateChange @ connectAdvanced.js:202
dispatch @ createStore.js:173
(anonymous) @ index.js:14
dispatch @ applyMiddleware.js:35
handleResponse @ index.js:1
EventEmitter.emit @ events.js:96
(anonymous) @ fetch_request.js:83
Promise.then (async)
(anonymous) @ fetch_request.js:78
Promise.then (async)
fetchRequest @ fetch_request.js:77
performFetchRequest @ index.js:156
searchService @ search.js:38
search @ index.js:186
(anonymous) @ index.js:1
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ index.js:1
(anonymous) @ index.js:11
watchComponent @ SingleDropdownList.js:313
setReact @ SingleDropdownList.js:155
componentWillMount @ SingleDropdownList.js:66
callComponentWillMount @ react-dom.development.js:6370
mountClassInstance @ react-dom.development.js:6435
updateClassComponent @ react-dom.development.js:7840
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
(anonymous) @ index.js:7
__webpack_require__ @ bootstrap 38cc65b1e8e9d5426636:678
fn @ bootstrap 38cc65b1e8e9d5426636:88
(anonymous) @ index.js:22321
__webpack_require__ @ bootstrap 38cc65b1e8e9d5426636:678
(anonymous) @ bootstrap 38cc65b1e8e9d5426636:724
(anonymous) @ bootstrap 38cc65b1e8e9d5426636:724
invariant.js:42 Uncaught (in promise) 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 invariant (invariant.js:42)
at requestWork (react-dom.development.js:10833)
at scheduleWorkImpl (react-dom.development.js:10732)
at scheduleErrorRecovery (react-dom.development.js:10748)
at captureError (react-dom.development.js:10562)
at renderRoot (react-dom.development.js:10391)
at performWorkOnRoot (react-dom.development.js:11014)
at performWork (react-dom.development.js:10967)
at requestWork (react-dom.development.js:10878)
at scheduleWorkImpl (react-dom.development.js:10732)
invariant @ invariant.js:42
requestWork @ react-dom.development.js:10833
scheduleWorkImpl @ react-dom.development.js:10732
scheduleErrorRecovery @ react-dom.development.js:10748
captureError @ react-dom.development.js:10562
renderRoot @ react-dom.development.js:10391
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
Component.setState @ react.development.js:237
onStateChange @ connectAdvanced.js:205
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:65
onStateChange @ connectAdvanced.js:202
dispatch @ createStore.js:173
(anonymous) @ index.js:14
dispatch @ applyMiddleware.js:35
handleResponse @ index.js:1
EventEmitter.emit @ events.js:96
(anonymous) @ fetch_request.js:83
Promise.then (async)
(anonymous) @ fetch_request.js:78
Promise.then (async)
fetchRequest @ fetch_request.js:77
performFetchRequest @ index.js:156
searchService @ search.js:38
search @ index.js:186
(anonymous) @ index.js:1
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ index.js:1
(anonymous) @ index.js:11
watchComponent @ SingleDropdownList.js:313
setReact @ SingleDropdownList.js:155
componentWillMount @ SingleDropdownList.js:66
callComponentWillMount @ react-dom.development.js:6370
mountClassInstance @ react-dom.development.js:6435
updateClassComponent @ react-dom.development.js:7840
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
(anonymous) @ index.js:7
__webpack_require__ @ bootstrap 38cc65b1e8e9d5426636:678
fn @ bootstrap 38cc65b1e8e9d5426636:88
(anonymous) @ index.js:22321
__webpack_require__ @ bootstrap 38cc65b1e8e9d5426636:678
(anonymous) @ bootstrap 38cc65b1e8e9d5426636:724
(anonymous) @ bootstrap 38cc65b1e8e9d5426636:724
invariant.js:42 Uncaught (in promise) 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 invariant (invariant.js:42)
at requestWork (react-dom.development.js:10833)
at scheduleWorkImpl (react-dom.development.js:10732)
at scheduleWork (react-dom.development.js:10689)
at Object.enqueueSetState (react-dom.development.js:6212)
at Connect.Component.setState (react.development.js:237)
at Connect.onStateChange (connectAdvanced.js:205)
at Object.notify (Subscription.js:26)
at Subscription.notifyNestedSubs (Subscription.js:65)
at Connect.onStateChange (connectAdvanced.js:202)
invariant @ invariant.js:42
requestWork @ react-dom.development.js:10833
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
Component.setState @ react.development.js:237
onStateChange @ connectAdvanced.js:205
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:65
onStateChange @ connectAdvanced.js:202
dispatch @ createStore.js:173
(anonymous) @ index.js:14
dispatch @ applyMiddleware.js:35
handleResponse @ index.js:1
EventEmitter.emit @ events.js:96
(anonymous) @ fetch_request.js:83
Promise.then (async)
(anonymous) @ fetch_request.js:78
Promise.then (async)
fetchRequest @ fetch_request.js:77
performFetchRequest @ index.js:156
searchService @ search.js:38
search @ index.js:186
(anonymous) @ index.js:1
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ index.js:1
(anonymous) @ index.js:11
watchComponent @ MultiDropdownList.js:417
setReact @ MultiDropdownList.js:169
componentWillMount @ MultiDropdownList.js:67
callComponentWillMount @ react-dom.development.js:6370
mountClassInstance @ react-dom.development.js:6435
updateClassComponent @ react-dom.development.js:7840
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
(anonymous) @ index.js:7
__webpack_require__ @ bootstrap 38cc65b1e8e9d5426636:678
fn @ bootstrap 38cc65b1e8e9d5426636:88
(anonymous) @ index.js:22321
__webpack_require__ @ bootstrap 38cc65b1e8e9d5426636:678
(anonymous) @ bootstrap 38cc65b1e8e9d5426636:724
(anonymous) @ bootstrap 38cc65b1e8e9d5426636:724
invariant.js:42 Uncaught (in promise) 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 invariant (invariant.js:42)
at requestWork (react-dom.development.js:10833)
at scheduleWorkImpl (react-dom.development.js:10732)
at scheduleWork (react-dom.development.js:10689)
at Object.enqueueSetState (react-dom.development.js:6212)
at Connect.Component.setState (react.development.js:237)
at Connect.onStateChange (connectAdvanced.js:205)
at Object.notify (Subscription.js:26)
at Subscription.notifyNestedSubs (Subscription.js:65)
at Connect.onStateChange (connectAdvanced.js:202)
invariant @ invariant.js:42
requestWork @ react-dom.development.js:10833
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
Component.setState @ react.development.js:237
onStateChange @ connectAdvanced.js:205
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:65
onStateChange @ connectAdvanced.js:202
dispatch @ createStore.js:173
(anonymous) @ index.js:14
dispatch @ applyMiddleware.js:35
handleResponse @ index.js:1
EventEmitter.emit @ events.js:96
(anonymous) @ fetch_request.js:83
Promise.then (async)
(anonymous) @ fetch_request.js:78
Promise.then (async)
fetchRequest @ fetch_request.js:77
performFetchRequest @ index.js:156
searchService @ search.js:38
search @ index.js:186
(anonymous) @ index.js:1
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:11
updateQuery @ ReactiveList.js:492
componentDidMount @ ReactiveList.js:117
commitLifeCycles @ react-dom.development.js:8770
commitAllLifeCycles @ react-dom.development.js:9946
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
commitRoot @ react-dom.development.js:10050
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
(anonymous) @ index.js:7
__webpack_require__ @ bootstrap 38cc65b1e8e9d5426636:678
fn @ bootstrap 38cc65b1e8e9d5426636:88
(anonymous) @ index.js:22321
__webpack_require__ @ bootstrap 38cc65b1e8e9d5426636:678
(anonymous) @ bootstrap 38cc65b1e8e9d5426636:724
(anonymous) @ bootstrap 38cc65b1e8e9d5426636:724
invariant.js:42 Uncaught (in promise) 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 invariant (invariant.js:42)
at requestWork (react-dom.development.js:10833)
at scheduleWorkImpl (react-dom.development.js:10732)
at scheduleWork (react-dom.development.js:10689)
at Object.enqueueSetState (react-dom.development.js:6212)
at Connect.Component.setState (react.development.js:237)
at Connect.onStateChange (connectAdvanced.js:205)
at Object.notify (Subscription.js:26)
at Subscription.notifyNestedSubs (Subscription.js:65)
at Connect.onStateChange (connectAdvanced.js:202)
invariant @ invariant.js:42
requestWork @ react-dom.development.js:10833
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
Component.setState @ react.development.js:237
onStateChange @ connectAdvanced.js:205
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:65
onStateChange @ connectAdvanced.js:202
dispatch @ createStore.js:173
(anonymous) @ index.js:14
dispatch @ applyMiddleware.js:35
handleResponse @ index.js:1
EventEmitter.emit @ events.js:96
(anonymous) @ fetch_request.js:83
Promise.then (async)
(anonymous) @ fetch_request.js:78
Promise.then (async)
fetchRequest @ fetch_request.js:77
performFetchRequest @ index.js:156
searchService @ search.js:38
search @ index.js:186
(anonymous) @ index.js:1
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ index.js:1
(anonymous) @ index.js:11
watchComponent @ MultiDropdownList.js:417
setReact @ MultiDropdownList.js:169
componentWillMount @ MultiDropdownList.js:67
callComponentWillMount @ react-dom.development.js:6370
mountClassInstance @ react-dom.development.js:6435
updateClassComponent @ react-dom.development.js:7840
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
(anonymous) @ index.js:7
__webpack_require__ @ bootstrap 38cc65b1e8e9d5426636:678
fn @ bootstrap 38cc65b1e8e9d5426636:88
(anonymous) @ index.js:22321
__webpack_require__ @ bootstrap 38cc65b1e8e9d5426636:678
(anonymous) @ bootstrap 38cc65b1e8e9d5426636:724
(anonymous) @ bootstrap 38cc65b1e8e9d5426636:724
2invariant.js:42 Uncaught (in promise) 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 invariant (invariant.js:42)
at requestWork (react-dom.development.js:10833)
at scheduleWorkImpl (react-dom.development.js:10732)
at scheduleWork (react-dom.development.js:10689)
at Object.enqueueSetState (react-dom.development.js:6212)
at Connect.Component.setState (react.development.js:237)
at Connect.onStateChange (connectAdvanced.js:205)
at Object.notify (Subscription.js:26)
at Subscription.notifyNestedSubs (Subscription.js:65)
at Connect.onStateChange (connectAdvanced.js:202) ```

[divyanshu013]

Hi @davkap92, I'm not able to replicate this issue. Can you create a codesandbox for this? I might be missing something. You can use this as a starting point. Thanks!

[davkap92]

Hi @divyanshu013
Here you go: https://codesandbox.io/s/4xvmopqjqx

Seems to be when the ReactiveBase is in different component to the
ReactiveList... Which now thinking not sure why I needed it separate think I was just trying to keep it cleaner.

Thanks!