How do I use 'useEffect' in React 18

Question

I'm following a youtube tutorial, and the tutorial is using React 17 and I'm using React 18. I'm at a section where we're formatting some animated text, everything is working OK, but the part I'm on is setting the letters of the sentence to change on hover. I'm getting the following error:

react-dom.development.js:86 Warning: useEffect must not return anything besides a function, which is used for clean-up. You returned: 2

Here's the snip of code that is giving me issues:

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

Here is my scss for the text-animate-hover class:

  .text-animate-hover {
    min-width: 10px;
    display: inline-block;
    animation-fill-mode: both;

    &:hover {
      animation: rubberBand 1s;
      color: #ffd700;
    }
  }

I'm reading that I don't need to use 'useEffect' with React 18, but I'm not understanding what I should be doing instead. Most of the searching I've done has returned a lot of instances using 'useEffect' with 'async' issues, which I'm having trouble relating those to my specific issue.

I appreciate any help with this.

-N8

Answer 1

Remove the return from the useEffect, like this:

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

You can read more about useEffect here: https://reactjs.org/docs/hooks-effect.html

Answer 2

You should always clear the timeout or any interval on component unmount.

useEffect(() => {
  let timeout;

  timeout = setTimeout(() => {
    setLetterClass("text-animate-hover");
  }, 4000);

  return () => {
    clearTimeout(timeout);
  };
}, []);