chore(utils): Added a simple useOnUnmount hook

Author: mlaursen

packages/utils/src/__tests__/useOnUnmount.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { render } from "@testing-library/react";
+
+import { useOnUnmount } from "../useOnUnmount";
+import userEvent from "@testing-library/user-event";
+
+describe("useOnUnmount", () => {
+  it("should work correctly", () => {
+    const callback = jest.fn();
+    function Test() {
+      useOnUnmount(callback);
+
+      return null;
+    }
+
+    const { unmount, rerender } = render(<Test />);
+    expect(callback).not.toBeCalled();
+
+    rerender(<Test />);
+    expect(callback).not.toBeCalled();
+
+    unmount();
+    expect(callback).toBeCalledTimes(1);
+  });
+
+  it("should ensure the callback function doesn't have a stale closure", () => {
+    const callback = jest.fn();
+    function Test() {
+      const [value, setValue] = useState("");
+
+      useOnUnmount(() => {
+        callback(value);
+      });
+
+      return (
+        <input
+          type="text"
+          value={value}
+          onChange={(event) => setValue(event.currentTarget.value)}
+        />
+      );
+    }
+
+    const { getByRole, unmount } = render(<Test />);
+    const input = getByRole("textbox");
+
+    userEvent.type(input, "my new value");
+    expect(callback).not.toBeCalled();
+
+    unmount();
+    expect(callback).toBeCalledWith("my new value");
+  });
+});

packages/utils/src/index.ts

@@ -1,35 +1,31 @@
+export * from "./applyRef";
+export * from "./bem";
 export * from "./colors";
+export * from "./containsElement";
+export * from "./defaults";
+export * from "./Dir";
 export * from "./events";
+export * from "./getPercentage";
 export * from "./layout";
+export * from "./loop";
 export * from "./mode";
-export * from "./search";
-export * from "./sizing";
-export * from "./positioning";
-export * from "./wia-aria";
-
-export * from "./Dir";
-
-export * from "./bem";
+export * from "./nearest";
 export * from "./omit";
-export * from "./defaults";
+export * from "./positioning";
 export * from "./scrollIntoView";
-export * from "./containsElement";
-
-export * from "./unitToNumber";
-export * from "./applyRef";
+export * from "./search";
+export * from "./sizing";
 export * from "./throttle";
-export * from "./loop";
-export * from "./getPercentage";
-export * from "./nearest";
-export * from "./withinRange";
-
+export * from "./types";
+export * from "./unitToNumber";
+export * from "./useCloseOnOutsideClick";
 export * from "./useEnsuredRef";
-export * from "./useIsomorphicLayoutEffect";
-export * from "./useToggle";
 export * from "./useInterval";
-export * from "./useTimeout";
-export * from "./useTempValue";
+export * from "./useIsomorphicLayoutEffect";
+export * from "./useOnUnmount";
 export * from "./useRefCache";
-export * from "./useCloseOnOutsideClick";
-
-export * from "./types";
+export * from "./useTempValue";
+export * from "./useTimeout";
+export * from "./useToggle";
+export * from "./wia-aria";
+export * from "./withinRange";

packages/utils/src/useOnUnmount.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * A simple hook that only triggers the callback when a component is unmounted.
+ * This will make sure that the callback function does not have a stale closure
+ * by the time the component unmounts as well.
+ *
+ * @example
+ * Simple Example
+ * ```ts
+ * useOnUnmount(() => {
+ *   console.log('Component is unmounted.');
+ * });
+ *
+ * const [data, setData] = useState(initialData);
+ * useOnUnmount(() => {
+ *   API.saveCurrentData(data);
+ * });
+ *
+ * // update data
+ * ```
+ *
+ * @param callback - the function to call when the component unmounts.
+ */
+export function useOnUnmount(callback: () => void): void {
+  const ref = useRef(callback);
+  useEffect(() => {
+    ref.current = callback;
+  });
+
+  return useEffect(() => () => ref.current(), []);
+}