digamos que tengo un componente Home funcional:
const Home = () => { console.log('outside useEffect') useEffect(() => { console.log('inside useEffect') // cleanup function return () => { console.log('unmounted') } }, []) return <div>Hello Word</div> }La salida en la consola muestra:
outside useEffect inside useEffect unmounted inside useEffectMis preguntas son:
unmount el componente, sucede automáticamente después de que se haya renderizado una vez o cuándo?unmounts ? ¿Se elimina/elimina el componente? En caso afirmativo, ¿cómo puedo seguir viendo Hello World incluso si se unmounts ?Normalmente, un componente se unmounted cuando, por ejemplo, se procesa condicionalmente y el condicional se vuelve false . DummyComponent continuación se unmounted cada vez que state se vuelve false . Y cuando se unmounted un componente, se elimina del DOM y, por lo tanto, no lo verá en la página.
const DummyComponent = () => { useEffect(() => { console.log("mounted"); return () => { console.log("unmounted"); }; }, []); return <div>Hello Word</div>; }; const App = () => { const [state, setState] = useState(true); return ( <div> <button onClick={() => setState(!state)}>Toggle Dummy Component</button> {state ? <DummyComponent /> : <></>} </div> ); }; Lo que tiene en este momento es presentado por React v18 donde cada componente se mounted y se unmounted inmediatamente y se vuelve a mounted , cuando se encuentra en strict development mode . Expliqué el motivo en este control de calidad en Stack Overflow. Y es tan rápido que no te das cuenta. El production mode es como antes, explicado en la primera sección.
En el modo estricto de React 18, cada componente se desmonta y se vuelve a montar.
https://reactjs.org/blog/2022/03/29/react-v18.html
Quizás es por eso que "dentro de useEffect" se imprime después de "desmontar".