fix(useFileSubscribe): value getter ref to prevent infinite looping

BREAKING CHANGE: removed options and replaced with optional throttle

Author: liamross

src/hooks/useFile.ts

@@ -35,10 +35,10 @@ interface FileHook<F> {
  * @param throttle The timeout if unfetched memo promise.
  */
 export function useFile<F extends FileLike>(file: F, throttle?: number): FileHook<F> {
-  const [name, nameErr] = useFileSubscribe(file, f => f.name, 'onnamechange', { throttle });
-  const [thumbnail, thumbnailErr] = useFileSubscribe(file, f => f.thumbnail, 'onthumbnailchange', { throttle });
-  const [fileObj, fileObjErr] = useFileSubscribe(file, f => f.fileObj, 'onfileobjchange', { throttle });
-  const [documentObj, documentObjErr] = useFileSubscribe(file, f => f.documentObj, 'ondocumentobjchange', { throttle });
+  const [name, nameErr] = useFileSubscribe(file, f => f.name, 'onnamechange', throttle);
+  const [thumbnail, thumbnailErr] = useFileSubscribe(file, f => f.thumbnail, 'onthumbnailchange', throttle);
+  const [fileObj, fileObjErr] = useFileSubscribe(file, f => f.fileObj, 'onfileobjchange', throttle);
+  const [documentObj, documentObjErr] = useFileSubscribe(file, f => f.documentObj, 'ondocumentobjchange', throttle);
 
   const fileValue = useMemo<FileHook<F>>(
     () => ({

src/hooks/useFileSubscribe.ts

@@ -1,28 +1,26 @@
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { FileEventType, FileLike, MemoizedPromise } from '../data';
 import { DEFAULT_THROTTLE_TIMEOUT } from '../utils';
 
-export interface UseFileSubscribeOptions {
-  /** The timeout to throttle initial fetch of value. Default: 500ms. */
-  throttle?: number;
-}
-
 /**
  * Will subscribe to a value from a file and return the value, as well as any
  * async errors.
  * @param file The file to subscribe to.
  * @param getCurrentValue Function to extract the current value from the file.
  * @param eventType The event type to subscribe. Won't subscribe if not given.
+ * @param throttle The timeout to throttle initial fetch of value. Default: 500ms.
  */
 export function useFileSubscribe<F extends FileLike, T>(
   file: F,
   getCurrentValue: (file: F) => T | MemoizedPromise<T>,
   eventType?: FileEventType,
-  options: UseFileSubscribeOptions = {},
+  throttle?: number,
 ) {
+  const getValue = useRef(getCurrentValue);
+
   const [error, setError] = useState<any>();
   const [value, setValue] = useState<T | undefined>(() => {
-    const currentValue = getCurrentValue(file);
+    const currentValue = getValue.current(file);
     if (currentValue instanceof MemoizedPromise) return undefined;
     return currentValue;
   });
@@ -43,19 +41,20 @@ export function useFileSubscribe<F extends FileLike, T>(
     const subscribe = (delay?: boolean) => {
       setError(undefined);
 
-      const val = getCurrentValue(file);
+      const val = getValue.current(file);
       if (!(val instanceof MemoizedPromise)) {
         // Non-memoized-promise, can set directly.
         setValue(val);
         return;
       }
 
-      if (!delay || val.done || options.throttle === 0) {
+      setValue(undefined);
+      if (!delay || val.done || throttle === 0) {
         setMemoValue(val);
       } else {
         timeout = window.setTimeout(() => {
           setMemoValue(val);
-        }, options.throttle ?? DEFAULT_THROTTLE_TIMEOUT);
+        }, throttle ?? DEFAULT_THROTTLE_TIMEOUT);
       }
     };
 
@@ -70,7 +69,7 @@ export function useFileSubscribe<F extends FileLike, T>(
       cancelled = true;
       clearTimeout(timeout);
     };
-  }, [eventType, file, getCurrentValue, options.throttle]);
+  }, [eventType, file, throttle]);
 
   return useMemo(() => [value, error, setValue], [error, value]);
 }

src/storybook-helpers/data/files.ts

@@ -37,10 +37,7 @@ export class FakeFile implements FileLike {
     const internals = (() => {
       if (options.pending) return async () => new Promise(() => {});
       if (options.lazy) return async () => Promise.resolve(parameter);
-      if (options.error)
-        return async () => {
-          throw new Error();
-        };
+      if (options.error) return () => Promise.reject('Some error.');
       return parameter;
     })();
     return new MemoizedPromise(internals as FuturableOrLazy<T>);