New hook: useSafeTimeout

packages/compose/src/higher-order/with-safe-timeout/index.js

@@ -1,17 +1,8 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import useSafeTimeout from '../../hooks/use-safe-timeout';
 
 /**
  * A higher-order component used to provide and manage delayed function calls
@@ -21,46 +12,17 @@ import createHigherOrderComponent from '../../utils/create-higher-order-componen
  *
  * @return {WPComponent} Wrapped component.
  */
-const withSafeTimeout = createHigherOrderComponent(
-	( OriginalComponent ) => {
-		return class WrappedComponent extends Component {
-			constructor() {
-				super( ...arguments );
-				this.timeouts = [];
-				this.setTimeout = this.setTimeout.bind( this );
-				this.clearTimeout = this.clearTimeout.bind( this );
-			}
-
-			componentWillUnmount() {
-				this.timeouts.forEach( clearTimeout );
-			}
-
-			setTimeout( fn, delay ) {
-				const id = setTimeout( () => {
-					fn();
-					this.clearTimeout( id );
-				}, delay );
-				this.timeouts.push( id );
-				return id;
-			}
-
-			clearTimeout( id ) {
-				clearTimeout( id );
-				this.timeouts = without( this.timeouts, id );
-			}
-
-			render() {
-				return (
-					<OriginalComponent
-						{ ...this.props }
-						setTimeout={ this.setTimeout }
-						clearTimeout={ this.clearTimeout }
-					/>
-				);
-			}
-		};
-	},
-	'withSafeTimeout'
-);
+const withSafeTimeout = createHigherOrderComponent( ( OriginalComponent ) => {
+	return ( props ) => {
+		const { setTimeout, clearTimeout } = useSafeTimeout();
+		return (
+			<OriginalComponent
+				{ ...props }
+				setTimeout={ setTimeout }
+				clearTimeout={ clearTimeout }
+			/>
+		);
+	};
+}, 'withSafeTimeout' );
 
 export default withSafeTimeout;

packages/compose/src/hooks/use-safe-timeout/index.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { without } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+
+export default function useSafeTimeout() {
+	const timeouts = useRef( [] );
+
+	function clearTimeout( id ) {
+		clearTimeout( id );
+		timeouts.current = without( timeouts.current, id );
+	}
+
+	function setTimeout( fn, delay ) {
+		const id = setTimeout( () => {
+			fn();
+			clearTimeout( id );
+		}, delay );
+		timeouts.current.push( id );
+		return id;
+	}
+
+	useEffect( () => () => {
+		timeouts.current.forEach( clearTimeout );
+	}, [] );
+
+	return {
+		clearTimeout,
+		setTimeout,
+	};
+}