Repository: react
Issue: Bug: Should have a queue
Labels: Type: Discussion,Component: Reconciler

```
react-dom.development.js:89 Warning: React has detected a change in the order of Hooks called by wrappedComponent. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. useCallback                useCallback
3. useRef                     useRef
4. useDebugValue              useDebugValue
5. useEffect                  useEffect
6. useLayoutEffect            useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    in wrappedComponent (created by ApprovalManageView)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ApprovalManageView)
    in ApprovalManageView (created by wrappedComponent)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by wrappedComponent)
    in div (created by Transition)
    in div (created by Transition)
    in div (created by Transition)
    in Transition (created by ForwardRef(Collapse))
    in ForwardRef(Collapse) (created by WithStyles(ForwardRef(Collapse)))
    in WithStyles(ForwardRef(Collapse)) (created by wrappedComponent)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by wrappedComponent)
    in wrappedComponent (created by wrappedComponent)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by wrappedComponent)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by wrappedComponent)
    in wrappedComponent (created by ApprovalsSidebar)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ApprovalsSidebar)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ApprovalsSidebar)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ApprovalsSidebar)
    in ApprovalsSidebar (created by Context.Consumer)
    in ApprovalsSidebarWrapper (created by ContentSidebarContent)
    in ContentSidebarContent (created by SidebarDesktop)
    in div (created by SidebarDesktop)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by SidebarDesktop)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by SidebarDesktop)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by SidebarDesktop)
    in ErrorBoundary (created by SidebarDesktop)
    in SidebarDesktop (created by ContentEditViewUnstyled)
    in div (created by ForwardRef(AccordionDetails))
    in ForwardRef(AccordionDetails) (created by WithStyles(ForwardRef(AccordionDetails)))
    in WithStyles(ForwardRef(AccordionDetails)) (created by ContentEditViewUnstyled)
    in div (created by ForwardRef(Accordion))
    in div (created by Transition)
    in div (created by Transition)
    in div (created by Transition)
    in Transition (created by ForwardRef(Collapse))
    in ForwardRef(Collapse) (created by WithStyles(ForwardRef(Collapse)))
    in WithStyles(ForwardRef(Collapse)) (created by ForwardRef(Accordion))
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Accordion))
    in ForwardRef(Accordion) (created by WithStyles(ForwardRef(Accordion)))
    in WithStyles(ForwardRef(Accordion)) (created by ContentEditViewUnstyled)
    in span (created by ForwardRef(Badge))
    in ForwardRef(Badge) (created by WithStyles(ForwardRef(Badge)))
    in WithStyles(ForwardRef(Badge)) (created by ContentEditViewUnstyled)
    in SidebarStoreProvider (created by Sidebar)
    in Sidebar (created by ContentEditViewUnstyled)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ContentEditViewUnstyled)
    in SidebarStoreProvider (created by ContentEditViewUnstyled)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ContentEditViewUnstyled)
    in SidebarStoreProvider (created by ContentEditViewUnstyled)
    in ContentEditViewUnstyled (created by WithStyles(ContentEditViewUnstyled))
    in WithStyles(ContentEditViewUnstyled) (created by WithSizeDelayed)
    in div (created by WithSizeDelayed)
    in WithSizeDelayed (created by WithSize(WithStyles(ContentEditViewUnstyled)))
    in WithSize(WithStyles(ContentEditViewUnstyled)) (created by Context.Consumer)
    in form (created by Context.Consumer)
    in FormClassValidator (created by ContentEditForm)
    in ContentEditForm (created by ContentEditFormLoaderUnstyled)
    in div (created by ContentEditFormLoaderUnstyled)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ContentEditFormLoaderUnstyled)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ContentEditFormLoaderUnstyled)
    in ContentEditFormLoaderUnstyled (created by WithStyles(ContentEditFormLoaderUnstyled))
    in WithStyles(ContentEditFormLoaderUnstyled) (created by WithWidth(WithStyles(ContentEditFormLoaderUnstyled)))
    in WithWidth(WithStyles(ContentEditFormLoaderUnstyled)) (created by LoadableComponent)
    in LoadableComponent (created by ContentEditViewPage)
    in ContentEditViewPage (created by react2angular(ContentEditViewPage))
    in Suspense (created by react2angular(ContentEditViewPage))
    in DropContextProvider
    in Unknown (created by DragDropContext(Component))
    in DragDropContext(Component) (created by Providers)
    in SnackbarProvider (created by Providers)
    in MuiPickersUtilsProvider (created by Providers)
    in ThemeProvider (created by AppThemeProvider)
    in AppThemeProvider (created by Providers)
    in Providers (created by SubProviders)
    in SubProviders (created by react2angular(ContentEditViewPage))
    in react2angular(ContentEditViewPage)
    in Unknown (created by HotExportedComponent)
    in AppContainer (created by HotExportedComponent)
    in HotExportedComponent
printWarning @ react-dom.development.js:89
error @ react-dom.development.js:61
warnOnHookMismatchInDev @ react-dom.development.js:14738
updateHookTypesDev @ react-dom.development.js:14697
useState @ react-dom.development.js:15967
useState @ react.development.js:1497
(anonymous) @ ContentApprovalStatusView.tsx:38
(anonymous) @ mobxreactlite.esm.js:344
(anonymous) @ mobxreactlite.esm.js:306
trackDerivedFunction @ mobx.module.js:761
./node_modules/mobx/lib/mobx.module.js.Reaction.track @ mobx.module.js:1795
useObserver @ mobxreactlite.esm.js:304
(anonymous) @ mobxreactlite.esm.js:343
renderWithHooks @ react-dom.development.js:14826
updateFunctionComponent @ react-dom.development.js:17059
updateSimpleMemoComponent @ react-dom.development.js:16997
beginWork @ react-dom.development.js:18721
beginWork$1 @ react-dom.development.js:23211
performUnitOfWork @ react-dom.development.js:22189
workLoopSync @ react-dom.development.js:22162
performSyncWorkOnRoot @ react-dom.development.js:21788
(anonymous) @ react-dom.development.js:11112
unstable_runWithPriority @ scheduler.development.js:643
runWithPriority$1 @ react-dom.development.js:11062
flushSyncCallbackQueueImpl @ react-dom.development.js:11107
flushSyncCallbackQueue @ react-dom.development.js:11095
batchedUpdates$1 @ react-dom.development.js:21894
reactionScheduler @ mobx.module.js:1905
runReactions @ mobx.module.js:1881
endBatch @ mobx.module.js:1581
_endAction @ mobx.module.js:967
executeAction @ mobx.module.js:921
updateApproval @ mobx.module.js:901
(anonymous) @ ApprovalManageView.tsx:334
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
onApprovalEditFormSubmit @ ApprovalManageView.tsx:268
(anonymous) @ FormClassValidator.tsx:266
Promise.then (async)
onSubmit @ FormClassValidator.tsx:262
onClick @ ApprovalEditView.tsx:1487
callCallback @ react-dom.development.js:189
invokeGuardedCallbackDev @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:307
executeDispatch @ react-dom.development.js:390
executeDispatchesInOrder @ react-dom.development.js:415
executeDispatchesAndRelease @ react-dom.development.js:3279
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3288
forEachAccumulated @ react-dom.development.js:3260
runEventsInBatch @ react-dom.development.js:3305
runExtractedPluginEventsInBatch @ react-dom.development.js:3515
handleTopLevel @ react-dom.development.js:3559
batchedEventUpdates$1 @ react-dom.development.js:21903
batchedEventUpdates @ react-dom.development.js:1061
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3569
attemptToDispatchEvent @ react-dom.development.js:4268
dispatchEvent @ react-dom.development.js:4190
unstable_runWithPriority @ scheduler.development.js:643
runWithPriority$1 @ react-dom.development.js:11062
discreteUpdates$1 @ react-dom.development.js:21919
discreteUpdates @ react-dom.development.js:1072
dispatchDiscreteEvent @ react-dom.development.js:4169
Show 8 more frames
react-dom.development.js:15066 Uncaught Error: Should have a queue. This is likely a bug in React. Please file an issue.
    at updateReducer (react-dom.development.js:15066)
    at updateState (react-dom.development.js:15260)
    at Object.useState (react-dom.development.js:15972)
    at Object.useState (react.development.js:1497)
    at ContentApprovalStatusView.tsx:38
    at mobxreactlite.esm.js:344
    at mobxreactlite.esm.js:306
    at trackDerivedFunction (mobx.module.js:761)
    at Reaction../node_modules/mobx/lib/mobx.module.js.Reaction.track (mobx.module.js:1795)
    at useObserver (mobxreactlite.esm.js:304)
updateReducer @ react-dom.development.js:15066
updateState @ react-dom.development.js:15260
useState @ react-dom.development.js:15972
useState @ react.development.js:1497
(anonymous) @ ContentApprovalStatusView.tsx:38
(anonymous) @ mobxreactlite.esm.js:344
(anonymous) @ mobxreactlite.esm.js:306
trackDerivedFunction @ mobx.module.js:761
./node_modules/mobx/lib/mobx.module.js.Reaction.track @ mobx.module.js:1795
useObserver @ mobxreactlite.esm.js:304
(anonymous) @ mobxreactlite.esm.js:343
renderWithHooks @ react-dom.development.js:14826
updateFunctionComponent @ react-dom.development.js:17059
updateSimpleMemoComponent @ react-dom.development.js:16997
beginWork @ react-dom.development.js:18721
callCallback @ react-dom.development.js:189
invokeGuardedCallbackDev @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
beginWork$1 @ react-dom.development.js:23235
performUnitOfWork @ react-dom.development.js:22189
workLoopSync @ react-dom.development.js:22162
performSyncWorkOnRoot @ react-dom.development.js:21788
(anonymous) @ react-dom.development.js:11112
unstable_runWithPriority @ scheduler.development.js:643
runWithPriority$1 @ react-dom.development.js:11062
flushSyncCallbackQueueImpl @ react-dom.development.js:11107
flushSyncCallbackQueue @ react-dom.development.js:11095
batchedUpdates$1 @ react-dom.development.js:21894
reactionScheduler @ mobx.module.js:1905
runReactions @ mobx.module.js:1881
endBatch @ mobx.module.js:1581
_endAction @ mobx.module.js:967
executeAction @ mobx.module.js:921
updateApproval @ mobx.module.js:901
(anonymous) @ ApprovalManageView.tsx:334
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
onApprovalEditFormSubmit @ ApprovalManageView.tsx:268
(anonymous) @ FormClassValidator.tsx:266
Promise.then (async)
onSubmit @ FormClassValidator.tsx:262
onClick @ ApprovalEditView.tsx:1487
callCallback @ react-dom.development.js:189
invokeGuardedCallbackDev @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:307
executeDispatch @ react-dom.development.js:390
executeDispatchesInOrder @ react-dom.development.js:415
executeDispatchesAndRelease @ react-dom.development.js:3279
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3288
forEachAccumulated @ react-dom.development.js:3260
runEventsInBatch @ react-dom.development.js:3305
runExtractedPluginEventsInBatch @ react-dom.development.js:3515
handleTopLevel @ react-dom.development.js:3559
batchedEventUpdates$1 @ react-dom.development.js:21903
batchedEventUpdates @ react-dom.development.js:1061
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3569
attemptToDispatchEvent @ react-dom.development.js:4268
dispatchEvent @ react-dom.development.js:4190
unstable_runWithPriority @ scheduler.development.js:643
runWithPriority$1 @ react-dom.development.js:11062
discreteUpdates$1 @ react-dom.development.js:21919
discreteUpdates @ react-dom.development.js:1072
dispatchDiscreteEvent @ react-dom.development.js:4169
Show 9 more frames
react-dom.development.js:19561 The above error occurred in the <wrappedComponent> component:
    in wrappedComponent (created by ApprovalManageView)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ApprovalManageView)
    in ApprovalManageView (created by wrappedComponent)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by wrappedComponent)
    in div (created by Transition)
    in div (created by Transition)
    in div (created by Transition)
    in Transition (created by ForwardRef(Collapse))
    in ForwardRef(Collapse) (created by WithStyles(ForwardRef(Collapse)))
    in WithStyles(ForwardRef(Collapse)) (created by wrappedComponent)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by wrappedComponent)
    in wrappedComponent (created by wrappedComponent)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by wrappedComponent)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by wrappedComponent)
    in wrappedComponent (created by ApprovalsSidebar)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ApprovalsSidebar)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ApprovalsSidebar)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ApprovalsSidebar)
    in ApprovalsSidebar (created by Context.Consumer)
    in ApprovalsSidebarWrapper (created by ContentSidebarContent)
    in ContentSidebarContent (created by SidebarDesktop)
    in div (created by SidebarDesktop)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by SidebarDesktop)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by SidebarDesktop)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by SidebarDesktop)
    in ErrorBoundary (created by SidebarDesktop)
    in SidebarDesktop (created by ContentEditViewUnstyled)
    in div (created by ForwardRef(AccordionDetails))
    in ForwardRef(AccordionDetails) (created by WithStyles(ForwardRef(AccordionDetails)))
    in WithStyles(ForwardRef(AccordionDetails)) (created by ContentEditViewUnstyled)
    in div (created by ForwardRef(Accordion))
    in div (created by Transition)
    in div (created by Transition)
    in div (created by Transition)
    in Transition (created by ForwardRef(Collapse))
    in ForwardRef(Collapse) (created by WithStyles(ForwardRef(Collapse)))
    in WithStyles(ForwardRef(Collapse)) (created by ForwardRef(Accordion))
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Accordion))
    in ForwardRef(Accordion) (created by WithStyles(ForwardRef(Accordion)))
    in WithStyles(ForwardRef(Accordion)) (created by ContentEditViewUnstyled)
    in span (created by ForwardRef(Badge))
    in ForwardRef(Badge) (created by WithStyles(ForwardRef(Badge)))
    in WithStyles(ForwardRef(Badge)) (created by ContentEditViewUnstyled)
    in SidebarStoreProvider (created by Sidebar)
    in Sidebar (created by ContentEditViewUnstyled)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ContentEditViewUnstyled)
    in SidebarStoreProvider (created by ContentEditViewUnstyled)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ContentEditViewUnstyled)
    in SidebarStoreProvider (created by ContentEditViewUnstyled)
    in ContentEditViewUnstyled (created by WithStyles(ContentEditViewUnstyled))
    in WithStyles(ContentEditViewUnstyled) (created by WithSizeDelayed)
    in div (created by WithSizeDelayed)
    in WithSizeDelayed (created by WithSize(WithStyles(ContentEditViewUnstyled)))
    in WithSize(WithStyles(ContentEditViewUnstyled)) (created by Context.Consumer)
    in form (created by Context.Consumer)
    in FormClassValidator (created by ContentEditForm)
    in ContentEditForm (created by ContentEditFormLoaderUnstyled)
    in div (created by ContentEditFormLoaderUnstyled)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ContentEditFormLoaderUnstyled)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ContentEditFormLoaderUnstyled)
    in ContentEditFormLoaderUnstyled (created by WithStyles(ContentEditFormLoaderUnstyled))
    in WithStyles(ContentEditFormLoaderUnstyled) (created by WithWidth(WithStyles(ContentEditFormLoaderUnstyled)))
    in WithWidth(WithStyles(ContentEditFormLoaderUnstyled)) (created by LoadableComponent)
    in LoadableComponent (created by ContentEditViewPage)
    in ContentEditViewPage (created by react2angular(ContentEditViewPage))
    in Suspense (created by react2angular(ContentEditViewPage))
    in DropContextProvider
    in Unknown (created by DragDropContext(Component))
    in DragDropContext(Component) (created by Providers)
    in SnackbarProvider (created by Providers)
    in MuiPickersUtilsProvider (created by Providers)
    in ThemeProvider (created by AppThemeProvider)
    in AppThemeProvider (created by Providers)
    in Providers (created by SubProviders)
    in SubProviders (created by react2angular(ContentEditViewPage))
    in react2angular(ContentEditViewPage)
    in Unknown (created by HotExportedComponent)
    in AppContainer (created by HotExportedComponent)
    in HotExportedComponent

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
```
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

React version:

## Steps To Reproduce

1. use condition before hooks

```typescript
    const [state, setState] = React.useState<State>({...defaultState});
    const actions = store.isBulk ? {} : store.getActions(entity, switchView);

   // this line if it is below the onToggle then everything fine and have no error
    if (!approval) { return null; }

    const onToggle = React.useCallback((ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        const collapsibleName = ev.currentTarget.dataset.type + 'Open';
        const value = !state[collapsibleName];
        setState({ ...state, ...defaultState, [collapsibleName]: value });
    }, [state]);

```

<!--
  Your bug will get fixed much faster if we can run your code and it doesn't
  have dependencies other than React. Issues without reproduction steps or
  code examples may be immediately closed as not actionable.
-->

Link to code example:

<!--
  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
  repository on GitHub, or provide a minimal code example that reproduces the
  problem. You may provide a screenshot of the application if you think it is
  relevant to your bug report. Here are some tips for providing a minimal
  example: https://stackoverflow.com/help/mcve.
-->

## The current behavior
crash the rendeing

## The expected behavior
it should have an error message which localize better where the error was if cannot be fixed this issue :)