downshift
downshift copied to clipboard
Debounced function calls should be cleaned up on unmount
-
downshiftversion: master
Problem description:
I'm getting some intermittent test failures from a status message being added to the document by a previous test due to a debounce not being cleaned up.
Suggested solution:
https://github.com/downshift-js/downshift/blob/0a221cf3aa39447194415eb222dddf2ce9a228e8/src/hooks/utils.js#L458
function useA11yMessageSetter(
getA11yMessage,
dependencyArray,
{isInitialMount, highlightedIndex, items, environment, ...rest},
) {
// Sets a11y status message on changes in state.
useEffect(() => {
if (isInitialMount || isReactNative) {
return
}
updateA11yStatus(
() =>
getA11yMessage({
highlightedIndex,
highlightedItem: items[highlightedIndex],
resultCount: items.length,
...rest,
}),
environment.document,
)
// cancel the debounced function in cleanup
return () => updateA11yStatus.cancel()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, dependencyArray)
}
This isn't a perfect solution as when there are multiple instances, one unmounting could affect calls made from another instance. You could either track the number of instances, or make the callbacks specific to each instance though.