Autostart problems

[thibaultboursier]

Autostart problems

[thibaultboursier]

OK! Thanks for opening this issue. I'll let you have a look on PR.

[dancheskus]

I'm writing "use-timer": "thibaultboursier/use-timer#fix-start-function-reference-issue" in dependencies list. It is downloading without any problem, but project is not starting after that.

[thibaultboursier]

Hello @dancheskus,

Thanks for opening issue.
It's better if you provide me a reproductible issue, on StackBlitz for example.

I created an example: https://stackblitz.com/edit/use-timer-issue-47?file=index.tsx
Inside, we have a useEffect, for the autostart purpose, which has start function inside its dependencies array.
When we click on increment button, component is re-rendered, but timer does not start a new time.

I need more informations.

[dancheskus]

Timer should be decremental to see this bug. There also should be endTime.

https://stackblitz.com/edit/use-timer-issue-47-pfnhg7?file=index.tsx

[thibaultboursier]

I see. There should be some issue with start function reference, which causes a re-render as you declared it inside dependencies array. I'm going to investigate. Anyway, if you want to be sure that start function is executed only once, you should remove start function from dependencies array; it works.

const { time, start, pause, reset, isRunning } = useTimer({
    initialTime: 3,
    endTime: 0,
    timerType: "DECREMENTAL"
  });

  useEffect(()=>{
    start();
  }, [])

[dancheskus]

I know it will work without start function in dependencies array. But it should be there according to React rules.
Maybe it could be a good thing to add as a prop in timer settings, like

const { time, start, pause, reset, isRunning } = useTimer({
    autostart: true // default: false
});

[thibaultboursier]

It's a good idea to add autostart feature.
I don't think it's an issue to have an empty dependency array: that way, you are sure to enter inside just once. More and more you fill it, and more and more you must rely on external dependencies (in our case, my library), for which functions identity could not be stable and cause some re-renders.

[dancheskus]

If you’ll add autostart feature, there should also be an option to disable or enable it when component is already working. For example:

1. Component mounted
2. Timer starts
3. Timer finished
4. User clicks “reset timer“...
   What will be next? Timer will start again by default? Maybe after resetting timer I want to disable autostart.

[thibaultboursier]

In my opinion, since the timer has been auto-started once, it should not be auto-started again by default, after a reset for example.

[dancheskus]

Fair enough

[thibaultboursier]

You want to make a PR for this auto-start feature? I you don't, i could make it quickly tonight.

[dancheskus]

I think you will do it faster 😊

[thibaultboursier]

Hello @dancheskus ,

I made two PR:

• One to fix the issue about start function: #50
• An other to add autostart feature: #48

Please, have a look on it. If it's OK for you, I will include it inside release 2.0.0 and will close this issue.

[dancheskus]

Thanks, I will check it today. The only thing I don't know how to test it with my React project. How can I download not master use-timer package but another branch?

[thibaultboursier]

If you select develop branch, for example (https://github.com/thibaultboursier/use-timer/tree/develop), and you download zip, you will have use-timer-develop.zip.
But i suppose you talk about NPM download? You can do that:

"dependencies": {
   "use-timer": "thibaultboursier/use-timer#develop"
}

[thibaultboursier]

It should work with my PR branches ;-)

[thibaultboursier]

Do you have some errors?

[dancheskus]

Do you have some errors?
step by step.

1. yarn remove use-timer
2. yarn add thibaultboursier/use-timer#fix-start-function-reference-issue
3. result in dependencies:

  "dependencies": {
    "use-timer": "thibaultboursier/use-timer#fix-start-function-reference-issue"
  },

4. yarn start
5. error:

Failed to compile.

./src/components/MyComponent.js
Module not found: Can't resolve 'use-timer' in 'E:\Desktop\MyProj\src\components\MyComponent'

[thibaultboursier]

I'm going to test on my side.

[thibaultboursier]

Download module has empty source.

If you want to find a fasted solution, maybe you can copy library code inside your project (if you are in TypeScript) to test it. I'll find a solution to have an elegant way to test branches.

[dancheskus]

#48 looks good. Just waiting for variable rename

[thibaultboursier]

Fixed by PR #50.