Skip to content

Add useTimeoutManager hook

Warren Gifford requested to merge tj/use-timeout-manager into main

Created by: tjkandala

Motivation

Keeping track of timeouts is harder in function components than class components. You have to remember to register effect cleanup so the timeout is cleared when the component unmounts, and you need a way to keep track of the timeout ID between renders in case you want to cancel it. Timeout management boilerplate ends up polluting your component code when you need multiple timeouts. I've been working on components with multiple transitions for the last few days, and I needed this hook to clean them up (used here).

Refactoring setTimeout calls in function components

I only found one function component that set timeouts: GitCommitNode. I missed this in review a few days ago, and useTimeoutManager made it easier to change. Before, other tooltips would be cleared when users moved away from the 'copy to clipboard' button before the timeout. It probably wasn't a big problem here, but as we introduce more animations, it'll be nice to have a timeout manager for function components.

TODO: Consider effect of React 17 changes for useTimeoutManager

Merge request reports

Loading