Dependencias vacías con useMemo o useCallback VS useRef

En esta edición de GitHub, esencialmente propuse cambiar:

x = useCallback( ... , []);

x = useRef( ... ).current;

Los dos son iguales pero con useRefReact no compara las dependencias.

Para lo cual llegó una respuesta con una pregunta:

¿Hay alguna situación en la que una useMemo o useCallback sin dependencia sea una mejor opción que useRef?

No puedo pensar en uno, pero puedo haber pasado por alto algunos casos de uso.

Entonces, ¿alguien puede pensar en tal situación?

reactjs react-functional-component

— Izhaki
fuente

Respuestas:

Documentación de la API de Per React Hooks:

Tenga en cuenta que useRef no le notifica cuando cambia su contenido. La mutación de la propiedad .current no causa una nueva representación ... El uso de una referencia de devolución de llamada asegura que incluso si un componente hijo muestra el nodo medido más tarde (por ejemplo, en respuesta a un clic), aún se nos notificará al respecto en el padre componente y puede actualizar las medidas.

Puedes leer más sobre esto aquí y aquí .

— irasuna
fuente

Supongo que esto responde la pregunta, pero sospecho que esto es incorrecto. En el ejemplo de Sandbox React, cambiar useCallback(x,[])a useRef(x)funciona igual.

— Izhaki el

useRef(x).currentes decir.

— Izhaki el

Espero estar equivocado, pero he defendido

— Izhaki

No estoy del todo seguro En cuanto useCallback(cb, [])vs useRef(cb).currentmí mismo. Aunque, useMemo(cb, [])es diferente useRef(cb).currenten un sentido que useMemo, "solo volverá a calcular el valor memorizado cuando una de las dependencias haya cambiado". Versus useRefque siempre vuelve a calcular el valor pase lo que pase.

— irasuna

useRefnunca vuelve a calcular: siempre devuelve el valor inicial.

— Izhaki el

Si bien puede usar useRef para emular useCallback o con una dependencia vacía, no puede usarlo para todos los escenarios posibles de useCallback que es para conmemorar cuando alguna de las dependencias cambia.

Además, no hará una gran diferencia de rendimiento si usa useCallback with empty dependencyo usa Ref, ya que no tiene que realizar ninguna comparación pesada.

Además, si cambia un poco la implementación de la función para tener que volver a crearla en un cambio de parámetro en particular, simplemente puede actualizar la implementación useCallbacky agregar el parámetro adicional como dependencia. Sin embargo, si lo implementa con useRef, debe volver auseCallback

— Shubham Khatri
fuente

Gracias. Como sugiere el título, este es un caso de dependencias estrictamente vacío.

— Izhaki

@Izhaki Entiendo que su pregunta son dependencias estrictamente vacías y es por eso que mencioné que no hay ninguna diferencia en caso de dependencia vacía. Pero es cuando intentas agregar más cambios, es posible que necesites un poco de refactorización

— Shubham Khatri el

Porque la salida de useRef (() => {...}). Current es mutable.

Lo que puede causar efectos secundarios extraños en su código. Puedo cambiar el valor de la corriente en cualquier momento. https://codesandbox.io/s/confident-monad-vjeuw

Ese sería el caso de uso para no querer usar useRef

— Daniel Duong
fuente

Pero x = useRef(value).currentnunca devuelve una instancia mutable; refnunca se devuelve; currentes. Eso es lo mismo que con la useCallbackversión.

— Izhaki