React Hook "useState" 被有条件地调用。 在每个组件渲染错误中，必须以完全相同的顺序调用 React Hooks

Question

I am encountering an error after a git merge (I accidently had eslint warnings turned off). However, I don't know what is exactly causing this error, and how I can fix it. The error is:

ERROR in [eslint] src/pages/PageHome.js Line 47:49: React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

export default function PageHome() {
      var maxWebshopId = 0;
      const importedWebshopObject = JSON.parse(
        sessionStorage.getItem("client_shops")
      );
      function handleWindowSizeChange() {
        setWidth(window.innerWidth);
      }
      useEffect(() => {
        window.addEventListener("resize", handleWindowSizeChange);
        return () => {
          window.removeEventListener("resize", handleWindowSizeChange);
        };
      }, []);
    
      PrimeReact.ripple = true;
    
      const [width, setWidth] = useState(window.innerWidth);
      const isMobile = width <= 768;
    
      // Menu fold in/out state
      const [visible, setVisible] = useState(true);
      if (importedWebshopObject.length >= 1) {
        importedWebshopObject.forEach((element) => {
          console.log(element);
          if (parseInt(element.id) > maxWebshopId) {
            maxWebshopId = parseInt(element.id);
          }
        });
    
        const [WebshopOrderId, setWebshopOrderId] = useState(maxWebshopId);
        const value = { WebshopOrderId, setWebshopOrderId };
    
        return(
          <WebshopOrderIdContext.Provider value={value}>
            <div
              className='page-home'
              style={{ backgroundColor: "var(--surface-ground)" }}>
              <DashboardSidebar
                overlay={isMobile}
                visible={[visible, setVisible]}
              />
    
              <Menubar
                className='border-none pr-2 shadow-1 fixed z-5 w-full p-0'
                model={null}
                start={
                  !visible && (
                    <Button
                      icon='pi pi-bars'
                      className='p-button-secondary p-button-text p-3'
                      onClick={(e) => setVisible(true)}
                    />
                  )
                }
                end={
                  <div className='flex flex-row'>
                    <WebshopSwitcher />
                    <Divider className='m-0' layout='vertical' />
                    <LogoutButton />
                    <Divider className='m-0 mr-2' layout='vertical' />
                    <DarkModeButton />
                  </div>
                }
              />
              <div
                id='content-container'
                className='flex flex-row justify-content-center transition-duration-300'
                style={{
                  marginLeft: visible && !isMobile ? "20rem" : "0rem",
                  minHeight: "100vh",
                }}>
                <span className='spaced-container mt-6 w-full p-5'>
                  <Outlet />
                </span>
              </div>
            </div>
          </WebshopOrderIdContext.Provider>
        );
      }
      else {
        return(
          <div className='page-home'>
            <div className='flex flex-column flex-wrap justify-content-start align-items-start'>
              <h1 className='text-3xl font-bold m-6'>
                Je moet minstens één webshop op je account hebben om dit portaal te
                kunnen gebruiken.
              </h1>
              <Button
                label='terug naar de inlogpagina'
                className='p-button-primary p-button-outlined p-3 m-6'
                onClick={() => (window.location.href = "/login")}
              />
            </div>
          </div>
        );
      }
    }

Answer 1

Exactly what the error is telling you. This is inside of an if block:

const [WebshopOrderId, setWebshopOrderId] = useState(maxWebshopId);

React hooks don't allow that. Each rendering of the component must call the same hooks in the same order. Move it outside of the if block, up to where your other useState call is:

const [WebshopOrderId, setWebshopOrderId] = useState(maxWebshopId);
const [width, setWidth] = useState(window.innerWidth);
const isMobile = width <= 768;

Even if the component will only actually use that state based on a condition, the state still needs to exist regardless of that condition so the framework can manage it.