Los ganchos se llaman en orden de declaración como se menciona en Reglas de ganchos .

Lo mismo ocurre con las funciones de limpieza, por lo tanto, se llamará a ambas funciones de limpieza en el desmontaje del componente.

Consulte "usos de useEffect " para obtener una explicación detallada sobre las diferencias de funcionalidad de las devoluciones de llamada de limpieza.

Además, pruebe sus suposiciones ejecutando un ejemplo de registros simples:

 const Component = ({ isMounted }) => { useEffect(() => { console.log("Mount 1"); return () => { console.log("Mount 1 out"); }; }, []); useEffect(() => { console.log("Mount 2"); return () => { console.log("Mount 2 out"); }; }, [isMounted]); return <>Test</>; }; export default function App() { const [isMounted, toggle] = useReducer((p) => !p, true); useEffect(() => { console.log("1"); return () => { console.log("1 out"); }; }, [isMounted]); useEffect(() => { console.log("2"); return () => { console.log("2 out"); }; }, [isMounted]); return ( <> <button onClick={toggle}>{isMounted ? "unmount" : "mount"}</button> <div>{isMounted && <Component {...{ isMounted }} />}</div> </> ); }

en qué orden se llamará a esas funciones de limpieza (ejecutar la función al final)

¿Se llamará a ambas funciones cada vez que se desmonte un componente?

Sí, como puede ver en este ejemplo, todos los efectos de uso con una declaración de retorno (como "desmontar") se ejecutan cada vez que se desmonta el componente.

cualquier ejemplo de la vida real de tener múltiples funciones de limpieza

 import { useState, useEffect } from 'react'; const Welcome = () => { useEffect(() => { console.log("useEffect 1") return () => { console.log("useEffect1 cleanup") } }, []) useEffect(() => { console.log("useEffect 2") return () => { console.log("useEffect2 cleanup") } }, []) useEffect(() => { console.log("useEffect 3") return () => { console.log("useEffect3 cleanup") } }, []) return ( <div>Welcome !</div> ) } export default function UnStack() { const [show, setShow]=useState(true) return ( <div> {show && <Welcome />} <button type='button' onClick={()=>setShow((prev) => !prev)}>unmount sidebar</button> </div> ) };