Improve useCountdown

Hi again @juliencrn, I just moved back to react. I’m thinking on improving the useCountdown hook. But there would be breaking changes so I want to firstly have a small discussion with you.

Breaking changes

In the example usage

  const [count, { start, stop, reset }] = useCountdown({
    seconds: 60,
    interval: 500,
    isIncrement: false,
  })

1. (important) Rename seconds to countNumber or startingCount, countStart, etc. Since it is not the real seconds.
2. (trivial) Change start, stop, reset to startCountdown, stopCountdown, resetCountdown respectively. The default one would be unclear and make the code harder to maintain.
3. (trivial) Change interval to intervalMs or intervalMilisec specifying its unit.

Non-breaking changes

1. Add a countLimit, or limit, countdownLimit, countEnd, etc. to the setting.

Outcome & alternative

The final outcome of this proposal would look like this:

  const [count, { startCountdown, stopCountdown, resetCountdown }] = useCountdown({
    countStart: 60,
    intervalMs: 1000, // add 1000 by default
    countStop: 0, // 0 by default
    isIncrement: false,
  })

Alternative is to make a new useIntervalTimer hook to do the same job but with new name.

Thanks for reading. What’s your opinion?

[hexp1989]

Thanks for the confirmation. Working on it now.

For the breaking change, it’s ok, we will do minor update with a note in the changelog file 😎

On a second thought , maybe we can firstly keep the old functions and console.warn() about the deprecation when user uses the old ones, and then remove the old names in the next big version of usehooks-ts. What’s your opinion? Also, I’m thinking about using @microsoft/tsdoc to add a @deprecated to make it clearer in VSCode, but there seem to be two problems:

1. I don’t know where to add the TSDoc in this monorepo
2. Not sure if we can deprecate without changing the calling pattern.

I think you wouldn’t mind me to ask the original creator @hexp1989 for his opinion on this too?

Hi PabloLION. Sorry to see this late. The variable name’s change is great. At first I was thinking of being more concise. So I added some jsdoc and use destructuring alias and make your own exact naming. But in typescript doesn’t look good. Your advice is great and I gladly accept. 😃

[PabloLION]

I don’t know if a package is needed to depreciate a function, adding a @depreciated JSDoc comment and the console.warn() could be enough.

I didn’t mean that package… Its JSDoc improved to TSDoc, like JS - TS. You can just regard it as JSDoc. I’ll try to do the two versions and make 2 PRs. Thanks for the guidance. ❤️