downshift icon indicating copy to clipboard operation
downshift copied to clipboard

Debounced function calls should be cleaned up on unmount

Open domarmstrong opened this issue 4 years ago • 0 comments

  • downshift version: 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.

domarmstrong avatar Sep 30 '21 10:09 domarmstrong