prevDep.length undefined Cannot read properties of undefined (reading 'length')

[dkkb]

console.js:273 React Router caught the following error during render TypeError: Cannot read properties of undefined (reading 'length')
    at areHookInputsEqual (chunk-QAI6EAUB.js?v=d3ec0356:12139:46)
    at updateMemo (chunk-QAI6EAUB.js?v=d3ec0356:12828:19)
    at Object.useMemo (chunk-QAI6EAUB.js?v=d3ec0356:13349:24)
    at useMemo (chunk-WZ4PHDOT.js?v=d3ec0356:1094:29)
    at useSyncExternalStoreWithSelector (chunk-25IM2R2U.js?v=d3ec0356:41:26)
    at useStoreWithEqualityFn (zustand_traditional.js?v=d3ec0356:20:17)
    at useBoundStoreWithEqualityFn (zustand_traditional.js?v=d3ec0356:32:85)
    at useMyHook (useMyHook.ts:10:19)

Code

const createStore: StateCreator<GlobalStore, [['zustand/devtools', never]]> = (...parameters) => ({
    ...initialGlobalState,
    ...createUserSlice(...parameters),
});


const isDev = true;
export const useGlobalStore = createWithEqualityFn<GlobalStore>()(
    subscribeWithSelector(
        persist(devtools(createStore, {
            name: 'GlobalStore' + (isDev ? 'DEV' : ''),
        }), {
            name: 'zustand-storage',
            storage: createJSONStorage(() => sessionStorage),
        },)
    ),
    shallow,
);

useMyHook

export function useMyHook(userId: string) {
  
  const store = useGlobalStore((state) => ({
      data: state.data,
      callAPI : state.callAPI,
  }));
  return {blabla}
}

User.ts

export type UserProps = {
    userId: string | undefined;
};

// component
export const User = React.memo(
    ({userId}: UserProps) => {
        
     const {userData} =  userId ? useMyHook(userId) : { userData: null };

    return (<div></div>)
})

Page.ts

<Page>
    <User userId={userId}/>
</Page>

If I add the check of undefined of userId in parent component Page, and change userId: string | undefined to userId: string, it works.

I don't know what's the root cause, any help would be greatly appreciated.

[dbritto-dev]

@dkkb just a friendly reminder, memo is for components and useMemo for everything else I wouldn't use memo for hooks or other values

[dkkb]

Thank you very much, I use memo for my component, and the useMemo exception in the stack trace is from useSyncExternalStoreWithSelector. And I also tried to remove memo in this component, it still throw exception.

[dkkb]

I think I find the root cause, it's bad to call Hooks inside conditions or loops.

useRssArticleByFeedId.ts:10 Warning: React has detected a change in the order of Hooks called by null. 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. useRef                     useRef
2. useState                   useState
3. useEffect                  useEffect
4. useEffect                  useRef
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

From https://reactjs.org/link/rules-of-hooks: