ESLint flags "React Hook useEffect has a missing dependency: 'start'."

[brownieboy]

I'm copying this sample code into my project:

  const {
    canStart, // a boolean indicate if you can start tour guide
    start, // a function to start the tourguide
    stop, // a function  to stopping it
    eventEmitter, // an object for listening some events
  } = useTourGuideController()

  // Can start at mount 🎉
  // you need to wait until everything is registered 😁
  React.useEffect(() => {
    if (canStart) {
      // 👈 test if you can start otherwise nothing will happen
      start()
    }
  }, [canStart]) // 👈 don't miss it!

It seems to work okay, but EsLint flags the last line as an error because I'm not passing the start variable in the dependency array alongside canStart. Error is:

"React Hook useEffect has a missing dependency: 'start'."

I can clear the ESLint error flag by adding start to the dependency array, like so:

  }, [start, canStart]); // 👈 don't miss it!

However, that triggers an infinite loop, with the tour guide popping up again every time in finishes, and no way of stopping it.

I know I can edit the disable the ESLint error from showing, like so:

  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [canStart]); // 👈 don't miss it!

but that seems like sweeping it under the carpet a bit.

[ermankuruoglu]

I faced this problem too and I did same thing just like yours.

[brownieboy]

Yeah, I think it's actually a legit approach in this case to simply ignore the error. So I'm going to close this as an issue.