Bug: Should have a queue

[shadowvzs]

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

    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]);

Link to code example:

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 :)

[eps1lon]

The error message includes the component stack which evidently helped you identify the offending code in which const onToggle = React.useCallback((ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => { is conditional because earlier you have a conditional return if (!approval) { return null; }.

How would you like the error message to like to identify this issue better?

[shadowvzs]

The error message includes the component stack which evidently helped you identify the offending code in which const onToggle = React.useCallback((ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => { is conditional because earlier you have a conditional return if (!approval) { return null; }.

How would you like the error message to like to identify this issue better?

well i found out easily the error but only because i used useCallback only 1 place and tested the code every 5-10 minute :)

sorry, maybe stupid question, but not possible something like exact line? if not possible then this should be closed :)

[bvaughn]

Steps To Reproduce

1. use condition before hooks

Just to be clear– conditionally calling a hook, as shown in your repro code, is not supported. Check out the rules of hooks documentation:

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

Seems like maybe this issue is being filed because you think React should do a better job of identifying where the problem is? It looks like you didn't provide the complete code so I'm speculating a bit– but I think the error message does show this information.

It shows which component the problem is in:

The above error occurred in the <wrappedComponent> component:
    in wrappedComponent (created by ApprovalManageView)
    in div (created by ForwardRef(Grid))
    ...

And it shows where hooks got misaligned because of the conditional call:

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. useCallback                useCallback
3. useRef                     useRef
4. useDebugValue              useDebugValue
5. useEffect                  useEffect
6. useLayoutEffect            useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

And it points to the documentation for more information:

For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks

(That documentation is the same as I linked to at the top of my comment.)

Like I said, since you didn't provide the complete code– I'm guessing at some missing pieces. I did put the code you provided in a Code Sandbox though:
https://codesandbox.io/s/bold-snow-5pu8t?file=/src/App.js

And it shows the necessary info to point out where the problem is:

Are you seeing something different? If so, can you share a more complete repro from your side?

[eps1lon]

And it shows where hooks got misaligned because of the conditional call:

  Previous render            Next render
  ------------------------------------------------------
1. useState                   useState
2. useCallback                useCallback
3. useRef                     useRef
4. useDebugValue              useDebugValue
5. useEffect                  useEffect
6. useLayoutEffect            useState

To be fair, I'm not able to parse how this relates to the posted code. In the previous render was a useState followed by a useCallback followed by useRef. The next render had that same order. But the render implies that we had useState - useCallback - use* and now have useState - use*.

But it's hard to say whether that part of the error message is useful without knowing the full code and interactions that caused the misalignment.

[bvaughn]

To be fair, I'm not able to parse how this relates to the posted code.

Right. The posted code is a partial snippet so it's hard to make sense of the error message without having full context.