Hooks order is changed during update

[cometkim]

I'm trying to update to the React 19, but the following error occurs

React has detected a change in the order of Hooks called by FilterContextProvider. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://react.dev/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useTransition              useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

 at FilterContextProvider (http://localhost:3000/static/js/index.js:30486:11)
    at MainContextProvider (http://localhost:3000/static/js/index.js:58549:73)
    at PageMain (http://localhost:3000/static/js/index.js:60277:73)
    at Suspense
    at ErrorBoundary (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:83480:9)
    at errorBoundary(unknown)
    at Suspense
    at div
    at div
    at AppScreen (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:104845:11)
    at PageLayout (http://localhost:3000/static/js/index.js:27256:73)
    at ActivityProvider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:105918:11)
    at StackProvider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:105956:11)
    at PluginRenderer (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:106100:11)
    at div
    at RoutesProvider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:105451:22)
    at HistoryQueueProvider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:105284:11)
    at MainRenderer (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:106152:11)
    at CoreProvider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:106029:11)
    at PluginsProvider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:106078:11)
    at Stack (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:106345:74)
    at ThemeProvider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:27831:52)
    at Provider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:120187:29)
    at Provider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:120187:29)
    at NotificationContextProvider (http://localhost:3000/static/js/index.js:40468:73)
    at ToastContextProvider (http://localhost:3000/static/js/index.js:41021:73)
    at TransferIdentificationProvider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:16337:11)
    at RelayEnvironmentProvider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:245177:26)
    at Provider (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:228803:11)
    at Providers (http://localhost:3000/static/js/index.js:19249:73)
    at App (http://localhost:3000/static/js/index.js:19145:73)
    at Suspense
    at ErrorBoundary (http://localhost:3000/static/js/vendors-node_modules_pnpm_amplitude_analytics-browser_2_7_0_node_modules_amplitude_analytics--29d8c0.js:83480:9)

This seems to happen on any activity that calls the useStepFlow() API.

[cometkim]

Ok I found the conditional one from the user's codebase

export const useStepFlow: TypeUseStepFlow = (activityName) => {
  const actions = _useStepFlow(activityName);
  const stack = useStack();
  const stepPush = (...params) => {
    if (stack.globalTransitionState === 'loading') {
      return undefined;
    }
    return actions.stepPush(...params);
  };
  // ...
  return {
    stepPush,
  };
};

Removing this wrapper seems to fix the problem, but the question still remains. The conditional call here is “actions”. But the error says it's react hooks and not actual actions.