Actualmente, mi aplicación cambia a la página /about de después de 5 segundos de una introducción en la página /home . Quiero romper este tiempo de espera si alguien cambia manualmente la página.

Para esto tengo un estado de introDisplayed que es false por defecto. Al hacer clic en un enlace dentro de la aplicación, la introDisplayed se está convirtiendo en true .

¿Por qué setTimeout dentro de useEffect no se borra? Como referencia, he enumerado todos mis intentos sobre este asunto.

aclaración: he intentado agregar introDisplayed solo a las dependencias dentro de useEffect, así como con history y setIntroDisplayed como lo sugiere eslint y no cambia nada en este caso

 const Page = ({ introDisplayed, setIntroDisplayed }) => { const history = useHistory() const location = useLocation() // useEffect(() => { // if (introDisplayed === false) { // setTimeout(() => { // setIntroDisplayed(true) // history.push("/about") // }, 5000) // } else clearTimeout() // }) // useEffect(() => { // if (introDisplayed === false) { // var timer = setTimeout(() => { // setIntroDisplayed(true) // history.push("/about") // }, 5000) // } else clearTimeout(timer) // }) useEffect(() => { const timer = setTimeout(() => { setIntroDisplayed(true) history.push("/about") }, 1000) if (introDisplayed === true) { return () => clearTimeout(timer) } }) return () }