consistent-return for useEffect

Question

When i do something like this

  useEffect(() => {
    if (steps.step2 && !requestKey) {
      const timeoutId = setTimeout(() => startProcess(), 500)
      return () => clearTimeout(timeoutId)
    }
  }, [steps, requestKey, startProcess])

eslint complains me error Expected to return a value at the end of arrow function consistent-return for return () => clearTimeout(timeoutId)

Because when i comment this an error disappears.

// return () => { clearTimeout(timeoutId); }

How to solve this, any ideas?

Answer 1

If you're returning in at least one branch, you need to always return a value to follow the rule. It doesn't have to be a function, it just has to be something other than the standalone statement return. This works too:

  useEffect(() => {
    if (steps.step2 && !requestKey) {
      const timeoutId = setTimeout(() => startProcess(), 500)
      return () => clearTimeout(timeoutId)
    }
    return undefined;
  }, [steps, requestKey, startProcess])

Also note that setTimeout(() => startProcess(), 500) simplifies to setTimeout(startProcess, 500).

Answer 2

When i add this return () => {} at the end of useEffect(() => {...})

Now eslint doesn't complains about this.

  useEffect(() => {
    if (steps.step2 && !requestKey) {
      const timeoutId = setTimeout(() => startProcess(), 500)
      return () => clearTimeout(timeoutId)
    }
    + return () => {}
  }, [steps, requestKey, startProcess])