useAsyncTaskFetch: pending is "true" from the start

Hi, noticed some weird behaviour when firing useAsyncTaskFetch by using the .start() method.

Pending status is set to true when fetch is not started, and also .started is not set to false after fetch is complete.

Here’s demo: https://codesandbox.io/s/react-hooks-async-demo-ebe5n You can see loading state from the start, and button is disabled after fetch is done.

Also, maybe it’s codesandbox related, but after installing “react-hooks-async” dependency, there was an error

Could not find dependency: ‘core-js’ relative to ‘/node_modules/react-hooks-async/dist/index.js’

so i had to add it manually.

ADDED 30.08.19 Found one more thing. If you remove disabled attribute of the button in that codesanbox demo, and fire another fetch while previous is running (better do it in slow3g mode), the request is canceled and another one is started, that’s ok, but the task has pending status false . I looked into use-async-task.js and it looks like after firing next request, forceUpdateRef.current(func); of the previous task object runs after forceUpdateRef.current(func); of the next task. So we get pending state of the finished task. As a workaround i added this to the task object:

safeStart: () => {
      task.abort();
      setTimeout(() => {
        task.start();
      }, 0);

and exporting it as a start method

  return useMemo(
    () => ({
      start: task.safeStart,

and it worked ok, JFYI

[bugleev]

Thank you for your work! Tools you are creating are so good!

[dai-shi]

Published: https://www.npmjs.com/package/react-hooks-async/v/3.4.0

I will close this issue. But we still look for better solutions. Any new ideas/suggestions are welcome (it would probably be better to file a new issue).