Callback In Custom React Hooks

I have the following hooks: function useLogin(state, url, loginMessage, callback) { const history = useHistory(); const logged_in = state.user.authenticated; useEffect(() =&g

Solution 1:

In your case, you can't update the useGroupAuth value. because it's returning only one value send one more variable(callback) to update/check whenever you need it. something like useState

Hook

functionuseGroupAuth(state, url, loginMessage) {
  const history = useHistory();
  const [has_group_auth, setAuth] = useState(false);

  constvalidate = () => {
    setAuth(
      state.user.available_teams.some(
        (currentValue) =>
          currentValue.toString().toLowerCase() ===
          teamname.toString().toLowerCase()
      )
    );
  };


  useEffect(validate, []);

  useEffect(() => {
    if (!has_group_auth) {
      if (state.user.available_teams.length != 0) {
        history.push(url);
        loginMessage();
      } else history.push("/");
      loginMessage();
    } else {
      callback();
    }
  }, [has_group_auth]);

  return [has_group_auth, validate];
}

Use

let [properauth, reValidate] = useGroupAuth(state, ("/team/" + state.user.available_teams[0]), teamhome3_message);


useEffect(() => {
  if (loggedin){
    // Do somethingreValidate();
  }
}, []);

Solution 2:

It seems you are missing dependencies in your useEffect hook. Both loggedin and properauth (teamname as well, really) are referenced in the effect callback, so they should be included in the effect's dependencies.

const loggedin = useLogin(state, "/accounts/login", teamhome2_message);
const properauth = useGroupAuth(state, ("/team/" + state.user.available_teams[0]), teamhome3_message);

useEffect(() => {
  if (loggedin && properauth && teamname) {
    checkteamexists(teamname);
  }
}, [loggedin, properauth, teamname]);