Estoy trabajando en un proyecto en el que useAuthProvider hace que useEffect se ejecute siempre. ¿Cómo evito esto?

 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]);

Cada vez que este enlace se ejecuta, authProvider es un objeto, por lo que la comparación superficial de useEffect siempre se evaluará como falsa.

He intentado simplemente tirar de la función que necesito también.

 const {getRoles} = useAuthProvider()

Sin embargo, la función getRoles también siempre se evaluará como falsa en las dependencias de useEffect porque useAuthProvider produce una nueva instancia de la función en cada procesamiento.

Parece que podría ser un buen caso de uso para useCallback. Pero nos encontramos exactamente con el mismo problema.

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

useCallback tiene exactamente la misma verificación de dependencia donde authProvider se evalúa como falso y, por lo tanto, useCallback actualiza la función y activa el useEffect nuevamente.

Estaba viendo algunos de los códigos de administración de reacción donde realmente usan useCallback de esta manera, pero no veo cómo está haciendo nada.

Esto es de /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; };

¿Este useCallback no será inútil porque la dependencia authProvider se evaluará como falsa cada vez? ¿Me estoy perdiendo de algo?

Gracias por cualquier ayuda.