molecule-dev/molecule

Every public app assembled using Molecule.dev.

molecule's Issues

usePromise: Failure to account for calls made in quick succession

Consider a scenario in which you have an API call that returns search results:

function submitSearch(searchString) {
	return makeApiCall(searchString);
}

const [ searchRequest, search ] = usePromise(submitSearch);

Now imagine that you have a text field that allows the user to enter a search query. Each time the user enters a character, a search is submitted:

<input
	type="text"
	onChange={e => {
		if (searchRequest.cancel) {
			searchRequest.cancel();
		}
		search(e.target.value);
	}}
/>

The expectation here is that as multiple characters are entered, the state update process for previous searches will be canceled, resulting in a single status update containing the search results for the most recently entered search phrase - but that's not what happens. Instead, the state is updated with the results that are returned for every single keypress. This is because the implementation of usePromise is rather naive. It only understands the concept of a "canceled" request at a global function level - not at the level of each individual call. In other words - with each subsequent call to search(), the "canceled" flag is reset. As a result, by the time a search result comes back, the status update proceeds as if it was never canceled in the first place.

Await returned promises for functions passed to setState/extendState

This works:

extendState(new Promise((resolve, reject) => {
  // ...
}));

This doesn't (type error):

extendState(async () => {
  // ...
});