useEffect must not return anything besides a function, which is used for clean-up. You returned: 15 ( at 40min 10sec)
Closed this issue · 7 comments
Hi @bobangajicsm,
Thank you so much for your tutorial. I am really grateful that you are teaching us core concepts of web development by building AWESOME projects.
I was doing good until I met with this error when I added the useEffect hook to add "text-animate-hover".
When I am updating this class without the use of setTimeout them I getting almost ideal result on hover but the previous class "text-animate" get's replaced and the animation effect after loading the page isn't working.
Link for the GitHub repo: https://github.com/rishavsharma-eth/react-portfolio-Fcc
Here is the error that I am getting from 40 minutes 0 sec in the video tutorial ( https://www.youtube.com/watch?v=bmpI252DmiI )
Please help me solve this problem.
Hello, I don't have info about why and what causes this issue but you can delete useEffect hook and then just use this :
setTimeout(() => {setLetterClass('text-animate-hover')}, 4000)
Paste where you deleted useEffect hook,
And again, I'm newbie here If useEfffect was used for for anything else from delay and I say something wrong, please just correct me. This is just my solution for that problem. Thanks!
Your Home > index.js should be like this :
`import LogoTitle from '../../assets/images/logo-r.png';
import { Link } from 'react-router-dom';
import './index.scss';
import { useEffect, useState } from 'react';
import { AnimatedLetters } from '../AnimatedLetters';
export const Home = () =>{
const [letterClass, setLetterClass] = useState('text-animate')
const nameArray = ['i', 's', 'h' , 'a', 'v'];
const jobArray = ['W','e','b',' ','D','e','v','e','l','o','p','e','r'];
setTimeout(() => {setLetterClass('text-animate-hover')}, 4000)
`
Hi @KaramGuliyev,
I tried to do something different from this. My friend suggested me to not return the value inside the useEffect hook.
I did that and the site is working fine. I am confused why it worked. Although in the tutorial everything was fine.
Hello, I don't have info about why and what causes this issue but you can delete useEffect hook and then just use this :
setTimeout(() => {setLetterClass('text-animate-hover')}, 4000)Paste where you deleted useEffect hook,
And again, I'm newbie here If useEfffect was used for for anything else from delay and I say something wrong, please just correct me. This is just my solution for that problem. Thanks!
Thank you so much for replying btw.
I understand your situation I am also a newbie my friend.
I got your point. It should also work as you are suggesting.
I have one doubt, when will this setTimeOut function will run. When we used useEffect this ran 4s after the page reloaded/fetched.
Will this get executed by the compiler itself while running the script. Not using useEffect won't make any difference?
Hello, I don't have info about why and what causes this issue but you can delete useEffect hook and then just use this :
setTimeout(() => {setLetterClass('text-animate-hover')}, 4000)
Paste where you deleted useEffect hook,
And again, I'm newbie here If useEfffect was used for for anything else from delay and I say something wrong, please just correct me. This is just my solution for that problem. Thanks!Thank you so much for replying btw. I understand your situation I am also a newbie my friend.
I got your point. It should also work as you are suggesting.
I have one doubt, when will this setTimeOut function will run. When we used useEffect this ran 4s after the page reloaded/fetched.
Will this get executed by the compiler itself while running the script. Not using useEffect won't make any difference?
No, it's working fine I didn't notice any difference.
KaramGuliyev
Okay, thanks my friend :)
KaramGuliyev
Okay, thanks my friend :)
You're welcome, I'm really glad if my solution have a meaning to you.