React JS TypeError: Cannot read property 'length' of undefined at areHookInputsEqual

Question

I am facing some errors while rendering at SSR for some URL using renderToString from "react-dom/server"

I am getting following error:

TypeError: Cannot read property 'length' of undefined
at areHookInputsEqual (C:\projects\spd-web-app1\node_modules\react-dom\cjs\react-dom-server.node.development.js:992:38)
at Object.useMemo (C:\projects\spd-web-app1\node_modules\react-dom\cjs\react-dom-server.node.development.js:1230:13)
at useMemo (C:\projects\spd-web-app1\node_modules\react\cjs\react.development.js:1521:21)
at Provider (C:\projects\spd-web-app1\node_modules\react-redux\lib\components\Provider.js:22:41)
at finishHooks (C:\projects\spd-web-app1\node_modules\react-dom\cjs\react-dom-server.node.development.js:1077:16)
at processChild (C:\projects\spd-web-app1\node_modules\react-dom\cjs\react-dom-server.node.development.js:3046:14)
at resolve (C:\projects\spd-web-app1\node_modules\react-dom\cjs\react-dom-server.node.development.js:2962:5)
at ReactDOMServerRenderer.render (C:\projects\spd-web-app1\node_modules\react-dom\cjs\react-dom-server.node.development.js:3437:22)
at ReactDOMServerRenderer.read (C:\projects\spd-web-app1\node_modules\react-dom\cjs\react-dom-server.node.development.js:3375:29)
at renderToString (C:\projects\spd-web-app1\node_modules\react-dom\cjs\react-dom-server.node.development.js:3990:27)

What i found is,in react-dom-server.node.development.js → createWorkInProgressHook()

I am getting below object, in which memoizedState is not an array.

{
  memoizedState: 0,
  queue: { last: null, dispatch: [Function: bound dispatchAction] },
  next: {
    memoizedState: { current: [QueryData] },
    queue: null,
    next: { memoizedState: [Object], queue: null, next: [Object] }
  }
}

which when used in useMemo() var prevDeps = prevState[1]; will return undefined and thus causing issue in areHookInputsEqual()

I am not sure what could have gone wrong, so do not have a code to share.

Answer 1

I know this question is really old, but hopefully posting this can help someone else in the future. In my situation, I got this error when I used Array.map() without specifying a unique key attribute on the top-level child element in the loop.

It took me days to figure out my mistake, and for whatever reason, there was no clear error message indicating the root cause. It's clear in the docs that a unique key should be used on all child items of a list, but I don't think that's a very good reason to allow such a cryptic error message to surface.

https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key

Answer 2

I've seen this happening when a hook was using after a conditional statement. Moving the hook usage above the conditional statement fixed the problem.

Reference: https://reactjs.org/docs/hooks-rules.html