Changed 47 example

Author: mattpocock

src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx

@@ -30,15 +30,28 @@ export const useLoadAsyncVideo = (src: string) => {
   useEffect(() => {
     setState({ status: "loading" });
 
+    let cancelled = false;
+
     fetchVideo(src)
       .then((blob) => {
+        if (cancelled) {
+          return;
+        }
+
         appendVideoToDomAndPlay(blob);
 
         setState({ status: "loaded" });
       })
       .catch((error) => {
+        if (cancelled) {
+          return;
+        }
         setState({ status: "error", error });
       });
+
+    return () => {
+      cancelled = true;
+    };
   }, [src]);
 
   // @ts-expect-error

src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx

@@ -21,15 +21,28 @@ export const useLoadAsyncVideo = (src: string) => {
   useEffect(() => {
     setState({ status: "loading" });
 
+    let cancelled = false;
+
     fetchVideo(src)
       .then((blob) => {
+        if (cancelled) {
+          return;
+        }
+
         appendVideoToDomAndPlay(blob);
 
         setState({ status: "loaded" });
       })
       .catch((error) => {
+        if (cancelled) {
+          return;
+        }
         setState({ status: "error", error });
       });
+
+    return () => {
+      cancelled = true;
+    };
   }, [src]);
 
   // @ts-expect-error