Warning: React has detected a change in the order of Hooks

[hack3rcon]

Summary

Hello,
I want my website to run at http://IP/app2. I changed the next.config.js and callApi.tsx files as follows:

// next.config.js
module.exports = {
  basePath: '/app2',
  assetPrefix: '/app2',
  async rewrites() {
    return [
      {
        source: '/app2/_next/:path*',
        destination: '/_next/:path*'
      },
      {
        source: '/app2',
        destination: '/app2'
      }
    ]
  }
}

And:

const callApi = () => {
    const axiosInstance = axios.create({
        baseURL: `/api/app2`,
        withCredentials: true,
        headers: {
            'Content-Type': 'application/json',
        },
    });

After doing this, I see the following messages in the browser Console section:

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

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useRef                     useRef
3. useRef                     useRef
4. useRef                     useRef
5. useRef                     useRef
6. useRef                     useRef
7. useRef                     useRef
8. useMemo                    useMemo
9. useCallback                useCallback
10. useSyncExternalStore      useSyncExternalStore
11. useRef                    useRef
12. useCallback               useCallback
13. useCallback               useCallback
14. useLayoutEffect           useLayoutEffect
15. useLayoutEffect           useLayoutEffect
16. useLayoutEffect           useLayoutEffect
17. useDebugValue             useDebugValue
18. useContext                useContext
19. useRef                    useRef
20. useRef                    useRef
21. useRef                    useRef
22. useRef                    useRef
23. useRef                    useRef
24. useRef                    useRef
25. useMemo                   useMemo
26. useCallback               useCallback
27. useSyncExternalStore      useSyncExternalStore
28. useRef                    useRef
29. useCallback               useCallback
30. useCallback               useCallback
31. useLayoutEffect           useLayoutEffect
32. useLayoutEffect           useLayoutEffect
33. useLayoutEffect           useLayoutEffect
34. useDebugValue             useDebugValue
35. useState                  useState
36. useContext                useContext
37. useRef                    useRef
38. useRef                    useRef
39. useRef                    useRef
40. useRef                    useRef
41. useRef                    useRef
42. useRef                    useRef
43. useMemo                   useMemo
44. useCallback               useCallback
45. useSyncExternalStore      useSyncExternalStore
46. useRef                    useRef
47. useCallback               useCallback
48. useCallback               useCallback
49. useLayoutEffect           useLayoutEffect
50. useLayoutEffect           useLayoutEffect
51. useLayoutEffect           useLayoutEffect
52. useDebugValue             useDebugValue
53. useState                  useState
54. useState                  useState
55. useState                  useState
56. useState                  useState
57. useState                  useState
58. useState                  useState
59. useState                  useState
60. useState                  useState
61. useState                  useState
62. useState                  useState
63. useCallback               useCallback
64. useState                  useState
65. useEffect                 useEffect
66. useEffect                 useEffect
67. useCallback               useCallback
68. useMemo                   useMemo
69. useCallback               useCallback
70. useMemo                   useMemo
71. undefined                 useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at OrderList (webpack-internal:///(app-pages-browser)/./components/orders/orderList.tsx:52:76)
    at Orders (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11)
    at div
    at ContentAnimation (webpack-internal:///(app-pages-browser)/./components/layouts/content-animation.tsx:13:11)
    at div
    at div
    at MainContainer (webpack-internal:///(app-pages-browser)/./components/layouts/main-container.tsx:11:11)
    at div
    at DefaultLayout (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at Suspense
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11)
    at div
    at App (webpack-internal:///(app-pages-browser)/./App.tsx:17:11)
    at Suspense
    at Provider (webpack-internal:///(app-pages-browser)/./node_modules/react-redux/es/components/Provider.js:13:3)
    at ProviderComponent (webpack-internal:///(app-pages-browser)/./components/layouts/provider-component.tsx:16:11)
    at body
    at html
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)

Am I doing something wrong or does the site code need to be changed?

Thank you.

Additional information

No response

Example

No response

[yajatkaul]

I think you put a useContext hook inside a condition which isnt true, you cant conditionally call useContext

71. undefined                 useContext

edit: can you share your orderList.tsx file