使用无限循环在 UseEffect 中反应钩子函数

Question

I am trying to call a hook in my App.js file using a hook. All the logic works, but I'm getting a warning error in console "React Hook useEffect has a missing dependency: 'initAuth'." I know there are a lot of issues on this ,but I'm not sure if this is related to the hook or the complexity I am doing at the high level of my app. The intent is to use the "initAuth" function to look at my local storage and get my user token, name, etc... I only want this on a hard page refresh, so it should only run once.

If I add initAuth (the function) or the authObject ( object), I get infinite loops.

function App() {

  const { initAuth, authObject } = useAuth();

  useEffect(() => {
    initAuth();
  }, []);
// this throws the warning.  I need to add dependency
}

Answer 1

If you only want this effect to run once when the component first loads, then you can ignore the warning. You can disable the warning so it doesn't keep showing up in the console with the following:

useEffect(() => {
  initAuth();

// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Answer 2

This is how I would implement this hook :

function App() {

  const { initialized, authObject, initAuth } = useAuth();

  useEffect(() => {
    if (!initialized) {
       initAuth();
    }
  }, [initialized, initAuth]);
  
  ...
}

Or, better yet :

function App() {

  const authObject = useAuth();   // let useAuth initialize itself

 
  ...
}

Typically, useAuth seems to be a multi-purpose hook, being used by various components, so it makes no sense to allow multiple components to call initAuth ; the hook should only return the current state.

Preferably, you should implement that hook with a context

function App() {

  return (
    <AuthProvider>
      <AppContent />
    </AuthProvider>
  );
}

function AppContent() {
  const authObject = useAuth();

  ...

}

The contract, therefore, goes to the AuthProvider , and notifies every component using useAuth on state changes.

Answer 3

Thanks to Yanick's comment, this is how I initiated to provider to set my authorization:

import React, { useState, useEffect } from "react";

const AuthContext = React.createContext([{}, () => {}]);

const AuthContextProvider = (props) => {
  const [state, setState] = useState({ isLoggedIn: false });

  useEffect(() => {
    var auth = localStorage.getItem("authObject");

    if (auth) {
      setState({ isLoggedIn: true, authObject: auth });
    } else {
      setState({ isLoggedIn: false });
    }
  }, []);
  return (
    <AuthContext.Provider value={[state, setState]}>
      {props.children}
    </AuthContext.Provider>
  );
};

export { AuthContext, AuthContextProvider };

And my App.js simply uses the ContextProvider, no need to run useEffect anymore on App.js.

      <AuthContextProvider>
        <ThemeProvider theme={darkState ? dark() : light()}>
          <CssBaseline>
            <BrowserRouter>
              
            //...app.js stuff    
               
            </BrowserRouter>
          </CssBaseline>
        </ThemeProvider>
      </AuthContextProvider>