Quiero saber si esto está bien para hacer:
const onClick = useCallback(() => { setHoveredItem((hovered)=>{ setSelectedData(hovered); return hovered; }); },[]);Simplemente usando el setter useState para obtener el valor, 'eliminando' la dependencia de useCallback para evitar volver a renderizar. Observe la matriz de dependencia vacía. ¿Es esa una forma aceptable de hacer las cosas?
Estoy trabajando en una aplicación con un gráfico. Las re-renderizaciones del gráfico son realmente malas (básicamente se rompen). Así que usé React.memo. Todo bien hasta que necesitaba pasar oyentes de eventos:
<MemoChart {...{ data, onHover, onClick }}> </MemoChart>Al hacer clic, quiero almacenar el elemento sobrevolado.
Inicialmente, esta era mi función onClick:
const onClick = () => { setSelectedData(hoveredItem); }Pero, por supuesto, cada evento de desplazamiento vuelve a representar al padre, lo que hace que el gráfico se vuelva a representar. Use Callback on onClick funcionaría, excepto que si agrego una dependencia en hoveredItem, no hará nada.
Así que esto es lo que hice. Funciona, pero nunca lo he visto hecho y me pregunto si está bien hacerlo:
const onClick = useCallback(() => { setHoveredItem((hovered)=>{ setSelectedData(hovered); return hovered; }); },[]);ACTUALIZADO
Para su caso, creo que puede usar useRef para mantener los datos flotantes en lugar de un estado.
const hoveredRef = React.useRef() const onHover = useCallback((hovered) => { hoveredRef.current = hovered //won't make re-rendering }, []) const onClick = useCallback(() => { setSelectedData(hoveredRef.current) }, [])RESPUESTA ANTIGUA
<MemoChart {...{ data, onHover, onClick }}> </MemoChart> Su problema es que estos eventos onHover y onClick se inicializarán nuevamente cada vez, lo que provocará representaciones inesperadas. Si tiene un cálculo complejo en su componente, será lento en las representaciones.
En su caso onClick con useCallback , funciona, pero creará más problemas en los controladores de estado porque carece de dependencias, lo que significa que está considerando que la función será la misma todo el tiempo, pero de hecho, su función depende de que se hovered el estado flotante. sobre eventos
Propondría que pase las dependencias para alinearse con sus estados usados en las funciones.
const onHover = useCallback((hovered) => { setHoveredItem(hovered); }, []) //only initialize this function once after the component mounted const onClick = useCallback(() => { setSelectedData(hovered); },[hovered]); //initialize this function again when `hovered` state changesconst onClick = useCallback(() => { setHoveredItem((hovered)=>{ setSelectedData(hovered); return hovered; }); },[]);Esto no está mal, pero es un truco que lo ayuda a obtener el estado nuevo si tiene problemas de cierre. En su caso, no hay razón ya que no está trabajando con cierres, y el problema es que configura una matriz de deps vacía. Ahora dices que esto no funciona:
const onClick = useCallback(() => { setSelectedData(hovered); },[hovered]); Pero esto DEBE funcionar, a menos que esté haciendo algo mal cuando llama a setHovereditem .