prevent state updates after component unmounted

static/app-strings.json

@@ -1215,4 +1215,4 @@
   "%duration% minute ago": "%duration% minute ago",
   "%duration% seconds ago": "%duration% seconds ago",
   "%duration% second ago": "%duration% second ago"
-}
+}

ui/component/viewers/comicBookViewer.jsx

@@ -4,11 +4,11 @@ import Villain from 'villain-react';
 import LoadingScreen from 'component/common/loading-screen';
 
 // @if TARGET='web'
-import useStream from 'effects/use-stream'
+import useStream from 'effects/use-stream';
 // @endif
 
 // @if TARGET='app'
-import useFileStream from 'effects/use-stream-file'
+import useFileStream from 'effects/use-stream-file';
 // @endif
 
 // Import default styles for Villain
@@ -29,39 +29,39 @@ if (process.env.NODE_ENV !== 'production') {
   workerUrl = `/${workerUrl}`;
 }
 
-const ComicBookViewer = ( props: Props) => {
+const ComicBookViewer = (props: Props) => {
-    const { source, theme } = props
+  const { source, theme } = props;
-    const { stream, file } =  source
+  let finalSource;
 
-    // @if TARGET='web'
+  // @if TARGET='web'
-    const finalSource = useStream(stream)
+  finalSource = useStream(source.stream);
-    // @endif
+  // @endif
 
-    // @if TARGET='app'
+  // @if TARGET='app'
-    const finalSource = useFileStream(file)
+  finalSource = useFileStream(source.file);
-    // @endif
+  // @endif
 
-    const { error, loading, content } = finalSource
+  // Villain options
-    
+  const opts = {
-    const ready = content !== null && !loading
+    theme: theme === 'dark' ? 'Dark' : 'Light',
+    allowFullScreen: true,
+    autoHideControls: false,
+    allowGlobalShortcuts: true,
+  };
 
-    // Villain options
+  const { error, loading, content } = finalSource;
-    const opts = {
+  const ready = content !== null && !loading;
-      theme: theme === 'dark' ? 'Dark' : 'Light',
+  const errorMessage = __("Sorry, looks like we can't load the archive.");
-      allowFullScreen: true,
-      autoHideControls: false,
-      allowGlobalShortcuts: true,
-    };
 
-    const errorMessage = __("Sorry, looks like we can't load the archive.");
+  return (
-
+    <div className="file-render__viewer  file-render__viewer--comic">
-    return (
+      {loading && <LoadingScreen status={__('Loading')} />}
-      <div className="file-render__viewer  file-render__viewer--comic">
+      {ready && (
-        { loading && <LoadingScreen status={__('Loading')} />}
+        <Villain source={finalSource.content} className={'comic-viewer'} options={opts} workerUrl={workerUrl} />
-        { ready && <Villain source={finalSource.content} className={'comic-viewer'} options={opts} workerUrl={workerUrl} /> }
+      )}
-        { error && <LoadingScreen status={errorMessage} spinner={false} /> }
+      {error && <LoadingScreen status={errorMessage} spinner={false} />}
-      </div>
+    </div>
-    );
+  );
-  }
+};
 
 export default ComicBookViewer;

ui/effects/use-is-mounted.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+// Check if component is mounted, useful to prevent state updates after component unmounted
+function useIsMounted() {
+  const isMounted = React.useRef(true);
+
+  React.useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  // Returning "isMounted.current" wouldn't work because we would return unmutable primitive
+  return isMounted;
+}
+
+export default useIsMounted;

ui/effects/use-stream-file.js

@@ -1,36 +1,46 @@
-// @flow
 import React from 'react';
+import useIsMounted from 'effects/use-is-mounted';
 
 // Returns a blob from the download path
-export default function useFileStream(fileStream: (?string) => any) {
+export default function useFileStream(fileStream) {
+  const isMounted = useIsMounted();
 
   const [state, setState] = React.useState({
     error: false,
-    content: null,
     loading: true,
+    content: null,
   });
 
   React.useEffect(() => {
-    if (fileStream) {
+    if (fileStream && isMounted.current) {
-      let chunks = []
+      let chunks = [];
       const stream = fileStream();
-
+      // Handle steam chunk recived
       stream.on('data', chunk => {
-        chunks.push(chunk)
+        if (isMounted.current) {
+          chunks.push(chunk);
+        } else {
+          // Cancel stream if component is not mounted:
+          // The user has left the viewer page
+          stream.destroy();
+        }
       });
-
+      // Handle stream ended
       stream.on('end', () => {
-        const buffer = Buffer.concat(chunks)
+        if (isMounted.current) {
-        const blob = new Blob([buffer])
+          const buffer = Buffer.concat(chunks);
-        setState({ content: blob, loading: false });
+          const blob = new Blob([buffer]);
+          setState({ content: blob, loading: false });
+        }
       });
-
+      // Handle stream error
       stream.on('error', () => {
-        setState({ error: true, loading: false });
+        if (isMounted.current) {
-
+          setState({ error: true, loading: false });
+        }
       });
     }
-  }, []);
+  }, [fileStream, isMounted]);
 
   return state;
 }

ui/effects/use-stream.js

@@ -1,45 +1,56 @@
-// @flow
 import React from 'react';
 import https from 'https';
+import useIsMounted from 'effects/use-is-mounted';
 
 // Returns web blob from the streaming url
-export default function useStream(url: (?string) => any) {
+export default function useStream(url) {
+  const isMounted = useIsMounted();
 
   const [state, setState] = React.useState({
     error: false,
+    loading: true,
     content: null,
-    loading: false,
   });
 
   React.useEffect(() => {
-    if (url) {
+    if (url && isMounted.current) {
-      let chunks = [];
+      https.get(url, response => {
-
+        if (isMounted && response.statusCode >= 200 && response.statusCode < 300) {
-      // Start loading state
+          let chunks = [];
-      setState({loading: true})
+          // Handle stream chunk recived
-
+          response.on('data', function(chunk) {
-      https.get(
+            if (isMounted.current) {
-        url,
-        response => {
-          if (response.statusCode >= 200 && response.statusCode < 300) {
-            let chunks = []
-            response.on('data', function(chunk) {
               chunks.push(chunk);
-            });
+            } else {
-            response.on('end', () => {
+              // Cancel stream if component is not mounted:
-              const buffer = Buffer.concat(chunks)
+              // The user has left the viewer page
-              const blob = new Blob([buffer])
+              response.destroy();
-              console.info(response)
+            }
+          });
+          // Handle stream ended
+          response.on('end', () => {
+            if (isMounted.current) {
+              const buffer = Buffer.concat(chunks);
+              const blob = new Blob([buffer]);
+              console.info(response);
               setState({ content: blob, loading: false });
-            });
+            }
-          } else {
+          });
-            console.info(response)
+          // Handle stream error
+          response.on('error', () => {
+            if (isMounted.current) {
+              setState({ error: true, loading: false });
+            }
+          });
+        } else {
+          // Handle network error
+          if (isMounted.current) {
             setState({ error: true, loading: false });
           }
         }
-      );
+      });
     }
-  }, []);
+  }, [url, isMounted]);
 
   return state;
 }