question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Improve useCountdown

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:13 (13 by maintainers)

github_iconTop GitHub Comments

2reactions
hexp1989commented, May 24, 2022

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. 😃

1reaction
PabloLIONcommented, May 23, 2022

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. ❤️

Read more comments on GitHub >

github_iconTop Results From Across the Web

bradgarropy/use-countdown: useCountdown hook - GitHub
In any React component, import useCountdown , then call it like any other hook. The returned countdown value will update every second with...
Read more >
useCountdown() react hook - usehooks-ts
NEW VERSION: A simple countdown implementation. Accepts countStop (new), countStart (was seconds ), intervalMs (was interval ) and isIncrement as keys of the ......
Read more >
react-better-countdown-hook - npm
Better React Countdown Hook. Super simple and lightweight countdown timer hook with most of the functionality you would need.
Read more >
How to Use Countdown Timers to boost Conversions ... - Adoric
A countdown timer helps increase website conversions and revenue. Check here how Adoric countdown time can help your business make more ...
Read more >
How to create a countdown timer using React Hooks
We can isolate the countdown calculation in a custom hook called useCountdown . The custom hook accepts the initial date and time and ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found