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

The return is incorrect in useEffect. return is designated for a clean-up function that runs when the component is unmounted. Make sure to clearTimeout in the clean-up otherwise setLetterClass will attempt to set state on an unmounted component, triggering a console error -

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

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