Tengo un componente que usa el gancho useRef en un div para calcular la altura cada vez que se elimina un componente de ese div.
El problema que tengo es que clientHeight no siempre se actualiza cuando elimino un elemento del div. Funciona si uso useState y useEffect . ¿Hay alguna razón por la que el siguiente método no funcione? ¿Cómo puedo hacer que esto funcione sin usar más estado y otro efecto de uso?
no funciona:
useEffect(() => {
dispatch(setAppNotificationHeight(notificationRef.current?.clientHeight));
}, [notificationRef.current?.clientHeight]);
Obras:
const [height, setHeight] = useState<number | undefined>(undefined);
useEffect(() => {
setHeight(notificationRef.current?.clientHeight);
});
useEffect(() => {
dispatch(setAppNotificationHeight(height));
}, [height]);
Creo que tu problema se discute aquí . La mutación de una referencia no desencadena necesariamente una nueva representación y no desencadena necesariamente el efecto de uso. Podría usar un enlace useCallback en lugar de su solución de trabajo (consulte el fragmento de código de esta respuesta en particular).