引用 useAuthProvider 的 useCallback 有什么意义？

Question

我正在开发一个项目，其中 useAuthProvider 导致 useEffect 运行渲染。我该如何避免这种情况？

const authProvider = useAuthProvider();
const [loading, setLoading] = useState(true);
const [loaded, setLoaded] = useState(false);
const [roles, setRoles] = useState([]);

useEffect(() => {
    authProvider()
      .then((data) => {
        setRoles(data);
        setLoaded(true);
      })
      .catch((err) => {
        console.error(err);
      })
      .finally(() => {
        setLoading(false);
      });
}, [authProvider]);

每次这个钩子运行时 authProvider 都是一个对象，所以 useEffect 的浅比较总是会评估为 false。

也尝试过拉出我需要的功能。

const {getRoles} = useAuthProvider()

然而，getRoles 函数在 useEffect 依赖项中也总是会评估为 false，因为 useAuthProvider 在每次渲染时都会生成一个新的函数实例。

似乎它可能是 useCallback 的一个很好的用例。但是我们遇到了完全相同的问题。

const getRolesCallback = useCallback(
    () => authProvider.getRoles(),
    [authProvider]
  );

useCallback 具有完全相同的依赖项检查，其中 authProvider 评估为 false，因此 useCallback 刷新函数并再次触发 useEffect。

我正在查看一些 react-admin 代码，他们实际上以这种方式使用 useCallback，但我没有看到它是如何做任何事情的。

这是来自 /ra-core/src/auth/useGetPermissions.ts

const useGetPermissions = (): GetPermissions => {
    const authProvider = useAuthProvider();
    const getPermissions = useCallback(
        (params: any = {}) => authProvider.getPermissions(params),
        [authProvider]
    );

    return authProvider ? getPermissions : getPermissionsWithoutProvider;
};

这个 useCallback 不会因为 authProvider 依赖项每次都会评估为 false 而无用吗？我错过了什么吗？

感谢您的帮助。

Answer 1

据我所知，您根本不需要在依赖项中包含authProvider，只需一个空数组[] 即可满足您的用例。依赖项（第二个）参数的空数组意味着钩子只会在初始渲染时运行。