Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pass arguments to memoized callback in useAsync #81

Merged
merged 1 commit into from
Dec 19, 2018

Conversation

Jivings
Copy link
Contributor

@Jivings Jivings commented Dec 18, 2018

Currently no arguments are passed into the memoized callback. This means the use of an async function that requires arguments isn't possible. For instance;

const fetchItems = async function(searchTerm) {
  return (await fetch(`/api/items?q=${searchTerm}`)).json();
};

function Results({ searchTerm }) {
  const { value } = useAsync(fetchItems, [searchTerm]);
  // shows results
  return (
    <ul/> 
  );
}

searchTerm in the fetchItems function will be undefined.

As stated in the useCallback docs, the array of inputs as used on ln 24 is not passed as arguments, they must be passed when the memoized function is called.

Note
The array of inputs is not passed as arguments to the callback. Conceptually, though, that’s what they represent: every value referenced inside the callback should also appear in the inputs array. In the future, a sufficiently advanced compiler could create this array automatically.

This change passes the arguments to the memoized function.

Currently no arguments are passed into the memoized callback. This means the use of an async function that requires arguments isn't possible. For instance;

```
const fetchItems = async function(searchTerm) {
  return (await fetch(`/api/items?q=${searchTerm}`)).json();
};

function Results({ searchTerm }) {
  const { value } = useAsync(fetchItems, [searchTerm]);
  // shows results
  return (
    <ul/> 
  );
}
```

As stated in the `useCallback` [docs][1], the array of inputs as used on ln 24 is not passed as arguments, they must be passed when the memoized function is called.

> Note
> The array of inputs is not passed as arguments to the callback. Conceptually, though, that’s what they represent: every value referenced inside the callback should also appear in the inputs array. In the future, a sufficiently advanced compiler could create this array automatically.

This change passes the arguments to the memoized function.

[1]: https://reactjs.org/docs/hooks-reference.html#usecallback
@Jivings Jivings changed the title Pass arguments to memoized callback Pass arguments to memoized callback in useAsync Dec 18, 2018
Copy link
Owner

@streamich streamich left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@streamich streamich merged commit 88dd513 into streamich:master Dec 19, 2018
streamich pushed a commit that referenced this pull request Dec 19, 2018
# [5.1.0](v5.0.0...v5.1.0) (2018-12-19)

### Bug Fixes

* 🐛 just use any for setTimeout because of diff environments ([55673cb](55673cb))
* 🐛 memoized does not receive arguments ([244a533](244a533))
* 🐛 use Timeout type for build to work ([8c66abe](8c66abe))

### Features

* added useDebounce ([91ff6ba](91ff6ba))
* pass arguments to memoized callback ([#81](#81)) ([88dd513](88dd513))
@streamich
Copy link
Owner

🎉 This PR is included in version 5.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@Jivings Jivings deleted the patch-1 branch December 19, 2018 23:09
@farukg
Copy link

farukg commented Mar 31, 2019

Hi,

looks like the fix was reverted:
244a533#diff-8e6e0808e6745d8058a2f9cbd476172d

didn't it work or was it accidentally ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants