@khanacademy/wonder-blocks-core 11.0.1 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-core
 
+## 11.1.0
+
+### Minor Changes
+
+-   7516b239: Update useOnMountEffect to pass isMountedRef to callback
+
 ## 11.0.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -291,7 +291,14 @@ function useLatestRef(value) {
 }
 
 const useOnMountEffect = callback => {
-  React.useEffect(callback, []);
+  const isMountedRef = React.useRef(true);
+  React.useEffect(() => {
+    const cleanup = callback(isMountedRef);
+    return () => {
+      cleanup == null ? void 0 : cleanup();
+      isMountedRef.current = false;
+    };
+  }, []);
 };
 
 const useOnline = () => {

package/dist/hooks/use-on-mount-effect.d.ts

@@ -1,9 +1,10 @@
+import * as React from "react";
 /**
  * Runs a callback once on mount.
  *
  * If the callback returns a cleanup function, it will be called when the component is unmounted.
  *
- * @param {() => (void | (() => void))} callback function that forces the component to update.
+ * @param {(isMountedRef: React.MutableRefObject<boolean>) => void | (() => void)} callback function that forces the component to update.
  *
  * The following code snippets are equivalent
  * ```
@@ -25,5 +26,26 @@
  * }, []);
  *
  * If you only need to do something on mount, don't return a cleanup function from `callback`.
+ *
+ * If your callback is async, use the `isMountedRef` ref that's passed to the callback to ensure
+ * that the component using `useOnMountEffect` hasn't been unmounted, e.g.
+ *
+ * ```
+ * const MyComponent = () => {
+ *    const [foo, setFoo] = React.useState("");
+ *    useOnMountEffect((isMountedRef) => {
+ *        const action = async () => {
+ *            const res = await fetch("/foo");
+ *            const text = res.text();
+ *            if (isMountedRef.current) {
+ *                setFoo(text);
+ *            }
+ *        }
+ *
+ *        action();
+ *    });
+ *
+ *    return foo !== "" ? <h1>Loading...</h1> : <h1>{foo}</h1>;
+ * }
  */
-export declare const useOnMountEffect: (callback: () => void | (() => void)) => void;
+export declare const useOnMountEffect: (callback: (isMountedRef: React.MutableRefObject<boolean>) => void | (() => void)) => void;

package/dist/index.js

@@ -318,7 +318,14 @@ function useLatestRef(value) {
 }
 
 const useOnMountEffect = callback => {
-  React__namespace.useEffect(callback, []);
+  const isMountedRef = React__namespace.useRef(true);
+  React__namespace.useEffect(() => {
+    const cleanup = callback(isMountedRef);
+    return () => {
+      cleanup == null ? void 0 : cleanup();
+      isMountedRef.current = false;
+    };
+  }, []);
 };
 
 const useOnline = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "11.0.1",
+  "version": "11.1.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"