react hooks and setInterval

Question

Is there any alternative to just keeping a \"clock\" in the background to implement auto-next (after a few seconds) in carousel using react hooks?

The custom react hook

Answer 1

So far, it seems that both solutions below work as desired:

Conditionally creating timer — it requires that useEffect is dependent both on auto and current to work

useEffect(
    () => {
      if (!auto) return;
      const interval = setInterval(_ => {
        next();
      }, autoInterval);
      return _ => clearInterval(interval);
    },
    [auto, current]
  );

Conditionally executing update to state — it does not require useEffect dependencies

useEffect(() => {
    const interval = setInterval(_ => {
      if (auto) {
        next();
      } else {
        // do nothing
      }
    }, autoInterval);
    return _ => clearInterval(interval);
  });

Both solutions work if we replace setInterval by setTimeout