tengo un componente que

1. Inicie una referencia de websocket en el montaje (la propiedad de endpoint no cambia)
2. Cuando el componente entra en la vista de pantalla, llama a la subscribe en wsRef
3. Cuando el componente sale de la vista de pantalla, llama a la cancelación de unsubscribe en wsRef

El problema es que al unmount la segunda función de limpieza falla porque ya hemos cerrado el websocket con la primera función de limpieza.

Por lo tanto, no podemos cancelar la unsubscribe ya que el websocket no está en estado OPEN .

¿Cómo controlar el orden de los efectos de limpieza aquí?

 function Comp({endpoint, isVisible, id}) { const wsRef = useRef(null); useEffect(() => { wsRef.current = new WebsocketClass(endpoint); return () => { // [1] cleanup no 1 wsRef.current.close(); wsRef.current = null; } }, [endpoint]); useEffect(() => { if (isVisible) { wsRef.current.subscribe(id); } return () => { if (isVisible) { wsRef.current.unsubscribe(id); // [2] fails, this cleanup runs after [1] } } }, [isVisible, id]); }

Si reordeno los dos useEffect en mi función, el problema parece desaparecer, pero ¿es realmente una solución permanente aquí?

Además, no puedo close el websocket en la limpieza de cancelación de unsubscribe porque el componente puede permanecer montado mientras sale de la pantalla y vuelve a aparecer cuando el usuario se desplaza hacia adelante y hacia atrás.