Estoy usando customHook para obtener datos de una API.
const useFetch = () => { const dispatch = useDispatch(); return async (callback, ...props) => { try { return await callback(...props); } catch (error) { const { msg } = error.response?.data || "Something went wrong"; dispatch(showModal(msg)); setTimeout(() => dispatch(hideModal()), 3000); } }; };y usarlo dentro de useEffect
const customFetch = useFetch(); useEffect(() => { (async () => { const data = await customFetch(fetchUsers, token); if (data) setUsers(data.user); })(); }, [token]);Pero eslint se queja de la falta de dependencia de customFetch. Si lo agrego, terminará en un bucle infinito. ¿Cómo puedo arreglar esto?
Entonces solo necesita useCallback aquí para hacer que la devolución de llamada regrese estable:
const useFetch = () => { const dispatch = useDispatch(); const fetcher = useCallback(async (callback, ...props) => { try { return await callback(...props); } catch (error) { const { msg } = error.response?.data || "Something went wrong"; dispatch(showModal(msg)); setTimeout(() => dispatch(hideModal()), 3000); } }, [dispatch]); return fetcher; }; useMemo y useCallback son específicamente útiles en casos como ese, cuando necesita que algo sea referencialmente igual, mientras que crear/devolver literalmente proporcionaría una nueva instancia en cada ejecución (función, matriz, objeto)