@khanacademy/wonder-blocks-timing 2.0.3 → 2.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @khanacademy/wonder-blocks-timing
+
+## 2.1.0
+### Minor Changes
+
+- 029b4810: Adds `useInterval()` hook that mimics the behavior of `ActionScheduler`'s
+  `interval()` method.
+- c57cd770: Rename `useInterval` and `useTimeout` to `useScheduledInterval`
+  and `useScheduledTimeout` respectively.
+- 29766c8e: Add `useInterval` and `useTimeout` hooks to provide a simple API for
+  using intervals and timeouts.

package/dist/es/index.js

@@ -1,5 +1,6 @@
 import _extends from '@babel/runtime/helpers/extends';
-import { Component, forwardRef, createElement, useState, useRef, useEffect, useCallback } from 'react';
+import * as React from 'react';
+import { useRef, useEffect, useState, useCallback } from 'react';
 
 const SchedulePolicy = {
   Immediately: "schedule-immediately",
@@ -395,7 +396,7 @@ ActionScheduler.NoopAction = {
  * </ActionSchedulerProvider>
  * ```
  */
-class ActionSchedulerProvider extends Component {
+class ActionSchedulerProvider extends React.Component {
   constructor(...args) {
     super(...args);
     this._actionScheduler = new ActionScheduler();
@@ -424,59 +425,188 @@ class ActionSchedulerProvider extends Component {
  * these props use the `WithActionScheduler` type.
  */
 function withActionScheduler(WrappedComponent) {
-  return /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/createElement(ActionSchedulerProvider, null, schedule => /*#__PURE__*/createElement(WrappedComponent, _extends({}, props, {
+  return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ActionSchedulerProvider, null, schedule => /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
     ref: ref,
     schedule: schedule
   }))));
 }
 
-function useTimeout(action, timeoutMs, options) {
+/**
+ * Returns a ref whose .current value is updated whenever
+ * the `value` passed to this hook changes.
+ *
+ * this is great for values that you want to reference from
+ * within a useCallback or useEffect event listener, without
+ * re-triggering the effect when the value changes
+ *
+ * @returns {{current: T}}
+ */
+
+const useUpdatingRef = value => {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+};
+
+/**
+ * A simple hook for using `setInterval`.
+ *
+ * @param action called every `intervalMs` when `active` is true
+ * @param intervalMs the duration between calls to `action`
+ * @param active whether or not the interval is active
+ */
+
+function useInterval(action, intervalMs, active) {
+  // We using a ref instead of a callback for `action` to avoid resetting
+  // the interval whenever the `action` changes.
+  const actionRef = useUpdatingRef(action);
+  useEffect(() => {
+    if (active) {
+      const intervalId = setInterval(() => {
+        actionRef.current();
+      }, intervalMs);
+      return () => {
+        clearInterval(intervalId);
+      };
+    } // actionRef isn't actually required, but react-hooks/exhaustive-deps
+    // doesn't recognize it as a ref and thus complains if it isn't in the
+    // deps list.  It isn't a big deal though since the value ofactionRef
+    // never changes (only its contents do).
+
+  }, [intervalMs, active, actionRef]);
+}
+
+/**
+ * A simple hook for using `setTimeout`.
+ *
+ * @param action called after `timeoutMs` when `active` is true
+ * @param timeoutMs the duration after which `action` is called
+ * @param active whether or not the interval is active
+ */
+
+function useTimeout(action, timeoutMs, active) {
+  // We using a ref instead of a callback for `action` to avoid resetting
+  // the interval whenever the `action` changes.
+  const actionRef = useUpdatingRef(action);
+  useEffect(() => {
+    if (active) {
+      const timeoutId = setTimeout(() => {
+        actionRef.current();
+      }, timeoutMs);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    } // actionRef isn't actually required, but react-hooks/exhaustive-deps
+    // doesn't recognize it as a ref and thus complains if it isn't in the
+    // deps list.  It isn't a big deal though since the value ofactionRef
+    // never changes (only its contents do).
+
+  }, [timeoutMs, active, actionRef]);
+}
+
+function useScheduledInterval(action, intervalMs, options) {
   var _options$schedulePoli;
 
+  if (typeof action !== "function") {
+    throw new Error("Action must be a function");
+  }
+
+  if (intervalMs < 1) {
+    throw new Error("Interval period must be >= 1");
+  }
+
   const schedulePolicy = (_options$schedulePoli = options == null ? void 0 : options.schedulePolicy) != null ? _options$schedulePoli : SchedulePolicy.Immediately;
   const [isSet, setIsSet] = useState(schedulePolicy === SchedulePolicy.Immediately);
-  const actionRef = useRef(action);
-  const mountedRef = useRef(false);
+  const set = useCallback(() => setIsSet(true), []);
+  const actionRef = useUpdatingRef(action);
+  const clear = useCallback(policy => {
+    var _policy;
+
+    policy = (_policy = policy) != null ? _policy : options == null ? void 0 : options.clearPolicy;
+
+    if (isSet && policy === ClearPolicy.Resolve) {
+      actionRef.current();
+    }
+
+    setIsSet(false);
+  }, // react-hooks/exhaustive-deps doesn't require refs to be
+  // listed in the deps array.  Unfortunately, in this situation
+  // it doesn't recognized actionRef as a ref.
+  [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
+  const runOnUnmountRef = useUpdatingRef(isSet && (options == null ? void 0 : options.clearPolicy) === ClearPolicy.Resolve);
   useEffect(() => {
-    mountedRef.current = true;
     return () => {
-      mountedRef.current = false;
-    };
+      // This code will only run with the component using this
+      // hook is unmounted.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      if (runOnUnmountRef.current) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        actionRef.current();
+      }
+    }; // This eslint rule doesn't realize actionRef and runOnUnmountRef
+    // a both refs and thus do not have to be listed as deps.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  useEffect(() => {
-    actionRef.current = action;
-  }, [action]);
-  const clear = useCallback(policy => {
-    if ((policy != null ? policy : options == null ? void 0 : options.clearPolicy) === ClearPolicy.Resolve) {
-      actionRef.current();
-    } // This will cause the useEffect below to re-run
+  useInterval(action, intervalMs, isSet);
+  return {
+    isSet,
+    set,
+    clear
+  };
+}
+
+function useScheduledTimeout(action, timeoutMs, options) {
+  var _options$schedulePoli;
 
+  if (typeof action !== "function") {
+    throw new Error("Action must be a function");
+  }
 
+  if (timeoutMs < 0) {
+    throw new Error("Timeout period must be >= 0");
+  }
+
+  const schedulePolicy = (_options$schedulePoli = options == null ? void 0 : options.schedulePolicy) != null ? _options$schedulePoli : SchedulePolicy.Immediately;
+  const [isSet, setIsSet] = useState(schedulePolicy === SchedulePolicy.Immediately);
+  const set = useCallback(() => setIsSet(true), []); // This wrapper isn't present in useScheduledInterval because we
+  // don't need to update `isSet` in that situations.
+
+  const wrappedAction = useCallback(() => {
     setIsSet(false);
-  }, [options == null ? void 0 : options.clearPolicy]);
-  const set = useCallback(() => {
-    if (isSet) {
-      clear();
-    } // This will cause the useEffect below to re-run
+    action();
+  }, [action]);
+  const actionRef = useUpdatingRef(wrappedAction);
+  const clear = useCallback(policy => {
+    var _policy;
 
+    policy = (_policy = policy) != null ? _policy : options == null ? void 0 : options.clearPolicy;
+
+    if (isSet && policy === ClearPolicy.Resolve) {
+      actionRef.current();
+    }
 
-    setIsSet(true);
-  }, [clear, isSet]);
+    setIsSet(false);
+  }, // react-hooks/exhaustive-deps doesn't require refs to be
+  // listed in the deps array.  Unfortunately, in this situation
+  // it doesn't recognized actionRef as a ref.
+  [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
+  const runOnUnmountRef = useUpdatingRef(isSet && (options == null ? void 0 : options.clearPolicy) === ClearPolicy.Resolve);
   useEffect(() => {
-    if (isSet && mountedRef.current) {
-      const timeout = window.setTimeout(() => {
+    return () => {
+      // This code will only run with the component using this
+      // hook is unmounted.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      if (runOnUnmountRef.current) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         actionRef.current();
-        setIsSet(false);
-      }, timeoutMs);
-      return () => {
-        window.clearTimeout(timeout);
-
-        if (!mountedRef.current) {
-          clear();
-        }
-      };
-    }
-  }, [clear, isSet, timeoutMs]);
+      }
+    }; // This eslint rule doesn't realize actionRef and runOnUnmountRef
+    // a both refs and thus do not have to be listed as deps.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useTimeout(wrappedAction, timeoutMs, isSet);
   return {
     isSet,
     set,
@@ -484,4 +614,4 @@ function useTimeout(action, timeoutMs, options) {
   };
 }
 
-export { ClearPolicy, SchedulePolicy, useTimeout, withActionScheduler };
+export { ClearPolicy, SchedulePolicy, useInterval, useScheduledInterval, useScheduledTimeout, useTimeout, withActionScheduler };

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 9);
+/******/ 	return __webpack_require__(__webpack_require__.s = 13);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -111,11 +111,117 @@ module.exports = require("react");
 /* 2 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useUpdatingRef; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+/**
+ * Returns a ref whose .current value is updated whenever
+ * the `value` passed to this hook changes.
+ *
+ * this is great for values that you want to reference from
+ * within a useCallback or useEffect event listener, without
+ * re-triggering the effect when the value changes
+ *
+ * @returns {{current: T}}
+ */
+
+const useUpdatingRef = value => {
+  const ref = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(value);
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+};
+
+/***/ }),
+/* 3 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useInterval; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+
+
+/**
+ * A simple hook for using `setInterval`.
+ *
+ * @param action called every `intervalMs` when `active` is true
+ * @param intervalMs the duration between calls to `action`
+ * @param active whether or not the interval is active
+ */
+
+function useInterval(action, intervalMs, active) {
+  // We using a ref instead of a callback for `action` to avoid resetting
+  // the interval whenever the `action` changes.
+  const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__[/* useUpdatingRef */ "a"])(action);
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+    if (active) {
+      const intervalId = setInterval(() => {
+        actionRef.current();
+      }, intervalMs);
+      return () => {
+        clearInterval(intervalId);
+      };
+    } // actionRef isn't actually required, but react-hooks/exhaustive-deps
+    // doesn't recognize it as a ref and thus complains if it isn't in the
+    // deps list.  It isn't a big deal though since the value ofactionRef
+    // never changes (only its contents do).
+
+  }, [intervalMs, active, actionRef]);
+}
+
+/***/ }),
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useTimeout; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+
+
+/**
+ * A simple hook for using `setTimeout`.
+ *
+ * @param action called after `timeoutMs` when `active` is true
+ * @param timeoutMs the duration after which `action` is called
+ * @param active whether or not the interval is active
+ */
+
+function useTimeout(action, timeoutMs, active) {
+  // We using a ref instead of a callback for `action` to avoid resetting
+  // the interval whenever the `action` changes.
+  const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__[/* useUpdatingRef */ "a"])(action);
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+    if (active) {
+      const timeoutId = setTimeout(() => {
+        actionRef.current();
+      }, timeoutMs);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    } // actionRef isn't actually required, but react-hooks/exhaustive-deps
+    // doesn't recognize it as a ref and thus complains if it isn't in the
+    // deps list.  It isn't a big deal though since the value ofactionRef
+    // never changes (only its contents do).
+
+  }, [timeoutMs, active, actionRef]);
+}
+
+/***/ }),
+/* 5 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return withActionScheduler; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
+/* harmony import */ var _action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
@@ -138,63 +244,136 @@ function withActionScheduler(WrappedComponent) {
 }
 
 /***/ }),
-/* 3 */
+/* 6 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useTimeout; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useScheduledInterval; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _util_policies_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _use_interval_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
+
 
 
-function useTimeout(action, timeoutMs, options) {
+
+function useScheduledInterval(action, intervalMs, options) {
   var _options$schedulePoli;
 
+  if (typeof action !== "function") {
+    throw new Error("Action must be a function");
+  }
+
+  if (intervalMs < 1) {
+    throw new Error("Interval period must be >= 1");
+  }
+
   const schedulePolicy = (_options$schedulePoli = options == null ? void 0 : options.schedulePolicy) != null ? _options$schedulePoli : _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* SchedulePolicy */ "b"].Immediately;
   const [isSet, setIsSet] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(schedulePolicy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* SchedulePolicy */ "b"].Immediately);
-  const actionRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(action);
-  const mountedRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(false);
+  const set = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => setIsSet(true), []);
+  const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[/* useUpdatingRef */ "a"])(action);
+  const clear = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(policy => {
+    var _policy;
+
+    policy = (_policy = policy) != null ? _policy : options == null ? void 0 : options.clearPolicy;
+
+    if (isSet && policy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* ClearPolicy */ "a"].Resolve) {
+      actionRef.current();
+    }
+
+    setIsSet(false);
+  }, // react-hooks/exhaustive-deps doesn't require refs to be
+  // listed in the deps array.  Unfortunately, in this situation
+  // it doesn't recognized actionRef as a ref.
+  [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
+  const runOnUnmountRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[/* useUpdatingRef */ "a"])(isSet && (options == null ? void 0 : options.clearPolicy) === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* ClearPolicy */ "a"].Resolve);
   Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
-    mountedRef.current = true;
     return () => {
-      mountedRef.current = false;
-    };
+      // This code will only run with the component using this
+      // hook is unmounted.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      if (runOnUnmountRef.current) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        actionRef.current();
+      }
+    }; // This eslint rule doesn't realize actionRef and runOnUnmountRef
+    // a both refs and thus do not have to be listed as deps.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
-    actionRef.current = action;
-  }, [action]);
-  const clear = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(policy => {
-    if ((policy != null ? policy : options == null ? void 0 : options.clearPolicy) === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* ClearPolicy */ "a"].Resolve) {
-      actionRef.current();
-    } // This will cause the useEffect below to re-run
+  Object(_use_interval_js__WEBPACK_IMPORTED_MODULE_3__[/* useInterval */ "a"])(action, intervalMs, isSet);
+  return {
+    isSet,
+    set,
+    clear
+  };
+}
+
+/***/ }),
+/* 7 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useScheduledTimeout; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _util_policies_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _use_timeout_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+
+
+
+
+function useScheduledTimeout(action, timeoutMs, options) {
+  var _options$schedulePoli;
 
+  if (typeof action !== "function") {
+    throw new Error("Action must be a function");
+  }
+
+  if (timeoutMs < 0) {
+    throw new Error("Timeout period must be >= 0");
+  }
 
+  const schedulePolicy = (_options$schedulePoli = options == null ? void 0 : options.schedulePolicy) != null ? _options$schedulePoli : _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* SchedulePolicy */ "b"].Immediately;
+  const [isSet, setIsSet] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(schedulePolicy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* SchedulePolicy */ "b"].Immediately);
+  const set = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => setIsSet(true), []); // This wrapper isn't present in useScheduledInterval because we
+  // don't need to update `isSet` in that situations.
+
+  const wrappedAction = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => {
     setIsSet(false);
-  }, [options == null ? void 0 : options.clearPolicy]);
-  const set = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => {
-    if (isSet) {
-      clear();
-    } // This will cause the useEffect below to re-run
+    action();
+  }, [action]);
+  const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[/* useUpdatingRef */ "a"])(wrappedAction);
+  const clear = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(policy => {
+    var _policy;
 
+    policy = (_policy = policy) != null ? _policy : options == null ? void 0 : options.clearPolicy;
 
-    setIsSet(true);
-  }, [clear, isSet]);
+    if (isSet && policy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* ClearPolicy */ "a"].Resolve) {
+      actionRef.current();
+    }
+
+    setIsSet(false);
+  }, // react-hooks/exhaustive-deps doesn't require refs to be
+  // listed in the deps array.  Unfortunately, in this situation
+  // it doesn't recognized actionRef as a ref.
+  [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
+  const runOnUnmountRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[/* useUpdatingRef */ "a"])(isSet && (options == null ? void 0 : options.clearPolicy) === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[/* ClearPolicy */ "a"].Resolve);
   Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
-    if (isSet && mountedRef.current) {
-      const timeout = window.setTimeout(() => {
+    return () => {
+      // This code will only run with the component using this
+      // hook is unmounted.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      if (runOnUnmountRef.current) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         actionRef.current();
-        setIsSet(false);
-      }, timeoutMs);
-      return () => {
-        window.clearTimeout(timeout);
-
-        if (!mountedRef.current) {
-          clear();
-        }
-      };
-    }
-  }, [clear, isSet, timeoutMs]);
+      }
+    }; // This eslint rule doesn't realize actionRef and runOnUnmountRef
+    // a both refs and thus do not have to be listed as deps.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  Object(_use_timeout_js__WEBPACK_IMPORTED_MODULE_3__[/* useTimeout */ "a"])(wrappedAction, timeoutMs, isSet);
   return {
     isSet,
     set,
@@ -203,14 +382,14 @@ function useTimeout(action, timeoutMs, options) {
 }
 
 /***/ }),
-/* 4 */
+/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ActionSchedulerProvider; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _util_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _util_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
 
 
 
@@ -244,14 +423,14 @@ class ActionSchedulerProvider extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
 }
 
 /***/ }),
-/* 5 */
+/* 9 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ActionScheduler; });
-/* harmony import */ var _timeout_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
-/* harmony import */ var _interval_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
-/* harmony import */ var _animation_frame_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
+/* harmony import */ var _timeout_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(10);
+/* harmony import */ var _interval_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+/* harmony import */ var _animation_frame_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
 
 
 
@@ -332,7 +511,7 @@ ActionScheduler.NoopAction = {
 };
 
 /***/ }),
-/* 6 */
+/* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -443,7 +622,7 @@ class Timeout {
 }
 
 /***/ }),
-/* 7 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -552,7 +731,7 @@ class Interval {
 }
 
 /***/ }),
-/* 8 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -659,7 +838,7 @@ class AnimationFrame {
 }
 
 /***/ }),
-/* 9 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -669,11 +848,23 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ClearPolicy", function() { return _util_policies_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-/* harmony import */ var _components_with_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var _components_with_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "withActionScheduler", function() { return _components_with_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
-/* harmony import */ var _hooks_use_timeout_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useTimeout", function() { return _hooks_use_timeout_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
+/* harmony import */ var _hooks_use_interval_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useInterval", function() { return _hooks_use_interval_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
+
+/* harmony import */ var _hooks_use_timeout_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useTimeout", function() { return _hooks_use_timeout_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
+
+/* harmony import */ var _hooks_use_scheduled_interval_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useScheduledInterval", function() { return _hooks_use_scheduled_interval_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
+
+/* harmony import */ var _hooks_use_scheduled_timeout_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useScheduledTimeout", function() { return _hooks_use_scheduled_timeout_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
+
+
+
 
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@khanacademy/wonder-blocks-timing",
   "private": false,
-  "version": "2.0.3",
+  "version": "2.1.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -20,6 +20,5 @@
     "wb-dev-build-settings": "^0.2.0"
   },
   "author": "",
-  "license": "MIT",
-  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
+  "license": "MIT"
 }