How can I use reactjs useState hook without broke my react app?

Question

When I try to add my Home-index.js useEffect hook my web page completely gone. Here is my codes.

index.js

useEffect(() => {
  return setTimeout (() => {
    setLetterClass('text-animate-hover')
  }, 4000)
}, [])

index.scss

.text-animate-hover {
    min-width: 10px;
    display: inline-block;
    animation-fill-mode: both;
  
    &:hover {
      animation: rubberBand 1s;
      color: #ff4f00;
    }
  }

Answer 1

You shouldn't return the result of setTimeout from useEffect. useEffect expects that you return a cleanup function that will be called later. Check out the docs here: https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup

To fix the issue you need to remove the return statement:

useEffect(() => {
  setTimeout (() => {
    setLetterClass('text-animate-hover')
  }, 4000)
}, [])

Answer 2

Well, I think if you add the state value as one of the classes, it should work.

index.js

const [letterClass, setLetterClass] = useState('')

useEffect(() => {
return setTimeout (() => {
 setLetterClass('text-animate-hover')
 }, 4000)
 }, [])

<div className={`${letterClass}`}>Something here...</div>