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

react18-json-view/src/components/json-node.tsx

Lines 60 to 65 in cc87705

	} else {
	const type = typeof node
	const [editing, setEditing] = useState(false)
	const [deleting, setDeleting] = useState(false)
	const valueRef = useRef<HTMLSpanElement>(null)

[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.