Estoy siguiendo un tutorial de youtube, y el tutorial usa React 17 y yo uso React 18. Estoy en una sección donde estamos formateando un texto animado, todo funciona bien, pero la parte en la que estoy está configurando las letras de la oración para cambiar al pasar el mouse. Recibo el siguiente error:
react-dom.development.js:86 Advertencia: useEffect no debe devolver nada más que una función, que se utiliza para la limpieza. Volviste: 2
Aquí está el fragmento de código que me está dando problemas:
useEffect(() => { return setTimeout(() => { setLetterClass('text-animate-hover') }, 4000) }, [])Aquí está mi scss para la clase text-animate-hover:
.text-animate-hover { min-width: 10px; display: inline-block; animation-fill-mode: both; &:hover { animation: rubberBand 1s; color: #ffd700; } }Estoy leyendo que no necesito usar 'useEffect' con React 18, pero no entiendo qué debería hacer en su lugar. La mayoría de las búsquedas que he realizado han arrojado muchas instancias que usan 'useEffect' con problemas 'async', que tengo problemas para relacionarlos con mi problema específico.
apreciaría cualquier ayuda con esto.
-N8
Siempre debe borrar el tiempo de espera o cualquier intervalo en el desmontaje del componente.
useEffect(() => { let timeout; timeout = setTimeout(() => { setLetterClass("text-animate-hover"); }, 4000); return () => { clearTimeout(timeout); }; }, []);Elimina el retorno del useEffect, así:
useEffect(() => { setTimeout(() => { setLetterClass('text-animate-hover') }, 4000); }, []);Puede leer más sobre useEffect aquí: https://reactjs.org/docs/hooks-effect.html