Add new prop to be able to skip the initial fetch on component mount

[markusylisiurunen]

Description

Added a new prop for Async and useAsync to be able to skip the initial render when component mounts. This can be useful, for example, for debounced actions.

Breaking changes

Should not have any breaking changes.

Checklist

• Implementation for both <Async> and useAsync()
• Added / updated the unit tests
• Added / updated the documentation
• Updated the PropTypes
• Updated the TypeScript type definitions

[codecov]

Codecov Report

Merging #70 into master will increase coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master      #70      +/-   ##
==========================================
+ Coverage   98.83%   98.85%   +0.01%     
==========================================
  Files          10       10              
  Lines         689      697       +8     
  Branches      161      168       +7     
==========================================
+ Hits          681      689       +8     
  Misses          6        6              
  Partials        2        2

Impacted Files	Coverage Δ
packages/react-async/src/propTypes.js	100% <ø> (ø)	⬆️
packages/react-async/src/Async.js	100% <100%> (ø)	⬆️
packages/react-async/src/reducer.js	100% <100%> (ø)	⬆️
packages/react-async/src/useAsync.js	98.93% <100%> (+0.04%)	⬆️
packages/react-async/src/status.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f22acd0...e84ba05. Read the comment docs.

[markusylisiurunen]

@ghengeveld Have the deploy jobs been working before or have they just been failing?

[ghengeveld]

This is interesting. Can't you use deferFn instead of promiseFn to achieve this behavior? I'm intrigued by the debounce use case, so this is certainly valuable. Not sure it warrants an additional option though.

[ghengeveld]

@ghengeveld Have the deploy jobs been working before or have they just been failing?

You can ignore those, the deploys are in ci/circleci: examples now. I've disabled now and deploy/netlify.

It only really deploys from master by the way.

[wyqydsyq]

@ghengeveld from what I have seen so far it appears deferFn does not resolve the value of the underlying promise, meaning you can't persist data returned from it cleanly (without passing setData into the deferred function) #87

[sbogdaniuk]

any progress on it?

[ghengeveld]

The work being done in https://github.com/async-library/future/tree/core will address the use case of debounced actions. However this is not going to be released any time soon.

As for this PR, I haven't heard back from @markusylisiurunen regarding the reason to use promiseFn with skipOnMount over deferFn. The behavior being toggled with the skipOnMount option added here is already available by using deferFn. I have no intention of adding new props for use cases that can already be implemented by other means. So unless there's a solid use case for skipOnMount over deferFn this PR is going nowhere.

[markusylisiurunen]

@ghengeveld Yeah, you are right. The behaviour can be implemented by using the deferFn, you just need to keep track of when the first render is happening and when it's an update render and call the deferFn accordingly. The reason for this was basically just to make this process a bit easier and cleaner. I understand that adding new props just for a specific use case may not be the best thing to do, so feel free to close this PR.

[sbogdaniuk]

Let's say we have search, and user should enter at least 3 characters.

const doSearch = async (query) => { ... }

const [search, setSearch] = useState('')

// trigger with useEffect
const { run, cancel, ... } = useAsync({
  deferFn: doSearch,
})

useEffect(() => {
  if (search.length > 2) {
    run(search)
  } else {
    cancel()
  }
}, [search])


// triggered with skip change
const { ... } = useAsync({
  promiseFn: doSearch,
  skip: search.length < 3
})

And you prefer to trigger it using via useEffect, over skip?

[markusylisiurunen]

@sbogdaniuk That was basically the reason I was thinking about adding a flag for skipping with the promiseFn. It is possible to do with useEffect and deferFn but, at least in my opinion, it can be quite verbose. Maybe I was trying to solve a problem that is not really a problem but rather my hate towards multiple random useEffect blocks..

[ghengeveld]

@sbogdaniuk You could probably use watchFn for that:

const doSearch = async (query) => { ... }
const [search, setSearch] = useState('')

const watchFn = ({ search }, prev) => search.length > 2 && search !== prev.search
const { ... } = useAsync({ deferFn: doSearch, watchFn, search })

Edit: oh wait that's only for promiseFn, obviously, so it would still start a request on first render. So yeah, useEffect is the way to go here.