From d2ea2b4450d83d11be8570867a5002d998222b09 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Thu, 12 Dec 2019 21:42:29 +0200
Subject: [PATCH 1/2] New hook: newSafeTimeout

---
 .../higher-order/with-safe-timeout/index.js   | 64 ++++---------------
 .../src/hooks/use-safe-timeout/index.js       | 36 +++++++++++
 2 files changed, 49 insertions(+), 51 deletions(-)
 create mode 100644 packages/compose/src/hooks/use-safe-timeout/index.js

diff --git a/packages/compose/src/higher-order/with-safe-timeout/index.js b/packages/compose/src/higher-order/with-safe-timeout/index.js
index 43d4e9e780d5b..bcf7dabb75569 100644
--- a/packages/compose/src/higher-order/with-safe-timeout/index.js
+++ b/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;
diff --git a/packages/compose/src/hooks/use-safe-timeout/index.js b/packages/compose/src/hooks/use-safe-timeout/index.js
new file mode 100644
index 0000000000000..d429a886d2e4b
--- /dev/null
+++ b/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,
+	};
+}

From 2d7ba6ebc3b2c824fbf11d64acb425e5877f3e4e Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Thu, 12 Dec 2019 21:50:34 +0200
Subject: [PATCH 2/2] Prefix window

---
 packages/compose/src/hooks/use-safe-timeout/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compose/src/hooks/use-safe-timeout/index.js b/packages/compose/src/hooks/use-safe-timeout/index.js
index d429a886d2e4b..08bd209c2c429 100644
--- a/packages/compose/src/hooks/use-safe-timeout/index.js
+++ b/packages/compose/src/hooks/use-safe-timeout/index.js
@@ -12,12 +12,12 @@ export default function useSafeTimeout() {
 	const timeouts = useRef( [] );
 
 	function clearTimeout( id ) {
-		clearTimeout( id );
+		window.clearTimeout( id );
 		timeouts.current = without( timeouts.current, id );
 	}
 
 	function setTimeout( fn, delay ) {
-		const id = setTimeout( () => {
+		const id = window.setTimeout( () => {
 			fn();
 			clearTimeout( id );
 		}, delay );