React Hook useCallback has an unnecessary dependency: 'GqlUserResponse'

Question

Hey i'm getting error in this code

interface GqlUserResponse {
    data: {
      listUsers: {
        items: UserType[]
      }
    },
    errors?: any[]
  }

  useEffect(() => {
    onAuthUIStateChange((
      nextAuthState: any,
      authData: any,
    ) => {
      setAuthState(nextAuthState);
      if (authState !== AuthState.SignedOut) {
        console.log('authData', authData);
        setEmail(authData.attributes.email);
      }
    });
  },
  [authState]);

  const fetchUser = useCallback(async () => {
    try {
      const filter = {
        email: {
          eq: email, // filter priority = 1
        },
      };
      const result = await API.graphql(
        graphqlOperation(listUsers, { filter }),
      ) as GqlUserResponse;
      console.log('result', result?.data?.listUsers.items[0]);
      // setUser(result?.data?.listUsers?.items[0]);
    } catch (res) {
      // eslint-disable-next-line no-console
      console.error('error fetching userFiles', res);
    }
  }, [GqlUserResponse, email]);

  useEffect(() => {
    fetchUser();
  }, [fetchUser]);

error: Line 78:6: React Hook useCallback has an unnecessary dependency: 'GqlUserResponse'. Either exclude it or remove the dependency array. Outer scope values like 'GqlUserResponse' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps any toughs

Answer 1

The error message is very clear and helpful. Remove GqlUserResponse from the dependency array of useCallback .

The dependency array is used to define when useCallback (or, similarly, useMemo ) should stop using its memoized value and reinitialize. As the error message states...mutating outer scope values (in this case your interface itself ) isn't going to cause a renrender, so it doesn't belong in the dependency array.