Tengo un método useCallback() a continuación para mejorar el rendimiento. Esta será la misma lógica con useEffect()
Si tengo una dependencia que es router.asPath , pero a veces el router es nulo, lo que puede causar que la función se bloquee.
Para mejorar el rendimiento, no quiero poner todo el objeto del router , ya que otros campos cambian, no quiero volver a ejecutar la función.
¿Alguna sugerencia?
const recordProduct = useCallback(() => { dispatch(setNextCollectionScroll(router.asPath, hit.handle)) }, [dispatch, hit.handle, router]) La dependencia ideal: [dispatch, hit.handle, router.asPath] Pero tengo que hacerlo ahora: debido a que el objeto del router puede ser nulo: [dispatch, hit.handle, router]
No está claro qué enrutador está usando, y si debe buscar en otro lado, pero en su caso simple de verificar las dependencias tanto en useEffect como en useCallback , puede usar el encadenamiento opcional de JS.
const recordProduct = useCallback(() => { dispatch(setNextCollectionScroll(router.asPath, hit.handle)) }, [dispatch, hit.handle, router?.asPath]) Cuando router es nulo, ? omitirá intentar obtener asPath y no obtendrá un error de tiempo de ejecución.
NOTA AL MARGEN
En mi opinión, siempre debe usar una propiedad específica en un objeto del que depende, especialmente si está usando una biblioteca de terceros, ya que puede suceder que devuelvan la misma referencia de objeto con un valor diferente (esto debe etiquetarse como biblioteca mal escrita, pero por si acaso depende de las propiedades).
Es más fácil seguir el flujo de datos y por qué se activa un gancho de dependencia en particular.