ReactJS ESlint 钩子错误 React Hooks 必须在每个组件渲染中以完全相同的顺序调用

Question

I am getting an error from ESlint regarding how I am using hooks when rendering my React component.

React Hook "useReactiveVar" is called conditionally. React Hooks must be called in the exact same order in every component render React Hook "useReactiveVar" is called conditionally. React Hooks must be called in the exact same order in every component render .eslintreact-hooks/rules-of-hooks

Below is my code. How can I resolve this?

import { useEffect } from 'react';
import { useApolloClient, useReactiveVar } from '@apollo/client';
import isClient from 'commons/isClient';

import useVisitorLocationHook from '../useVisitorLocationHook';
import ClosestOrderSampleValue from './ClosestOrderSampleValue';
import storesData from './stores.json';

const useClosestStoreOrderSample= () => {
  const client = useApolloClient();
  const { closestOrderSampleValueVar } = isClient() ? client.cache.jbReactiveVars : {};
  const { loading = false, OrderSampleValue = null, forUserZip = null } = isClient()
    ? useReactiveVar(closestOrderSampleValueVar)
    : {};
  const [userLocation] = useVisitorLocationHook();

  useEffect(() => {
    if (!userLocation?.zip || userLocation?.zip === forUserZip) {
      return;
    }
    ClosestOrderSampleValue.fetchClosestOrderSampleValuecode(client, userLocation.zip);
  }, [userLocation]);

  return {
    storeLocation: isClient() && OrderSampleValue ? storesData[OrderSampleValue] : null,
    isOrderSampleValueLoading: !userLocation?.zip ? false : loading,
  };
};

export default useClosestStoreOrderSample;

Answer 1

As per the rules of hooks, you can't conditionally calla hook. So this line:

const { loading = false, OrderSampleValue = null, forUserZip = null } = isClient()
    ? useReactiveVar(closestOrderSampleValueVar)
    : {};

is causing the error.

You need to ensure that you call useReactiveVar() without condition. For example, you could do this instead:

const clientData = useReactiveVar(closestOrderSampleValueVar);
const {
    loading = false,
    OrderSampleValue = null,
    forUserZip = null,
} = isClient() ? clientData : {};

This will make sure that you always call the hooks in the same and correct order. This is necessary as React uses the order in which hooks are called to ensure it updates the correct state through each render. You can read more information (with examples) on this here .