"React has detected a change in the order of Hooks called by JsonNode"

[tordans]

I am getting react warnings in my dev console in some case where I use JsonView. Anyone know how to prevent this?

Warning: React has detected a change in the order of Hooks called by JsonNode. 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. undefined                  useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at JsonNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:573:21)
    at div
    at NameValue (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:212:22)
    at div
    at ObjectNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:365:23)
    at JsonNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:573:21)
    at div
    at NameValue (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:212:22)
    at div
    at ObjectNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:365:23)
    at JsonNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:573:21)
    at div
    at NameValue (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:212:22)
    at div
    at ObjectNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:365:23)
    at JsonNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:573:21)
    at div
    at NameValue (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:212:22)
    at div
    at ObjectNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:365:23)
    at JsonNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:573:21)
    at code
    at JsonView (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:711:26)
    at details
    at section
    at MapDebugHelper (webpack-internal:///(app-pages-browser)/./app/(map)/changesets/[id]/_components/Map/MapDebugHelper/MapDebugHelper.tsx:21:86)

[YYsuni]

Can you provide a codesandbox for a review.

[tuan3w]

Hi @YYsuni Not sure if it's related, but I had a issue related to hooks:

Rendered more hooks than during the previous render.

I think the reason is that you are using hooks inside a condition expression, which causes this error:

https://github.com/YYsuni/react18-json-view/blob/cc877057d0a8d3af997b16145a0ddc6b93e81b74/src/components/json-node.tsx#L60-L65

[Houdou]

Hi @YYsuni I have encountered the same error when the value passed to JsonView changed from an object to a string. The behaviour matches the code pointed out by @tuan3w. Array.isArray(node) || isObject(node) would be returning false in the new render.

[mmmurf]

I got this error as well.