feat(@toss/react): useInterval stop/resume support

[d0422]

Overview

When using Interval, sometimes you need to stop and resume the interval.

When configuring the carousel, if auto-turning is implemented through useInterval, the interval must be stopped when the user is in the middle of the slide, and the interval must be resumed when the slide is completed.

In this case, I suggest that if it returns the factors presented above in the hook, it will be easy to implement!

Accordingly, why don't you return the stop, resume function, and intervalRunning status.

PR Checklist

• I read and included theses actions below

1. I have read the Contributing Guide
2. I have written documents and tests, if needed.

[vercel]

@d0422 is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

[raon0211]

Hello, thanks for your contribution!

While this change helps the use of useInterval, I think introducing a state within this hook is not a preferable choice for us (since adds a new state for all users of the hook who doesn't have the need to start or stop the interval).

However, I think adding an enabled option like useInterval(fn, { delay: 1000, enabled: false }) might be a good design choice, since it does not add a state to our hook.

What do you think?

[d0422]

@raon0211
Thank you for your response! I'm honored to contribute.
I agree that adding useState might not be beneficial for all users.
I think it would be better to reflect the design you presented.

type IntervalOptions =
  | number
  | {
      delay: number | null;
      trailing?: boolean;
      enabled?: boolean;
    };

[raon0211]

I think it would be better for us if we did not register a callback at all if it is not enabled like the following code.

useEffect(() => {
  if (delay == null || !enabled) {
    return;
  }

  const id = window.setInterval(tick, delay);
  return () => window.clearInterval(id);
}, [delay, savedCallback, enabled]);

[d0422]

Thank you for your feedback. I have reflected your opinion and added the corresponding test code.