fix(form): prevent infinite rerenders when calling useFileUpload's reset in useEffect

Author: mlaursen

packages/form/src/file-input/__tests__/useFileUpload.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, ReactElement } from "react";
+import React, { Fragment, ReactElement, useEffect } from "react";
 import filesize from "filesize";
 import {
   act,
@@ -436,6 +436,24 @@ describe("useFileUpload", () => {
     expect(() => getAllByRole("listitem")).toThrow();
   });
 
+  it("should not cause infinite rerenders if the reset function is added to a useEffect's dependency array", () => {
+    let renders = 0;
+    function Test(): null {
+      const { reset } = useFileUpload();
+      renders += 1;
+      useEffect(() => {
+        if (renders < 10) {
+          reset();
+        }
+      }, [reset]);
+
+      return null;
+    }
+
+    render(<Test />);
+    expect(renders).toBe(2);
+  });
+
   it("should abort any FileReaders when the reset function is called", () => {
     const file = new File(["pretend-bytes"], "README.txt");
     const { getByLabelText, getByRole } = render(<SingleFileTest />);

packages/form/src/file-input/useFileUpload.ts

@@ -188,7 +188,9 @@ export interface FileUploadHookReturnValue<
 }
 
 /** @internal */
-const DEFAULT_EXTENSIONS = [] as const;
+const EMPTY_LIST = [] as const;
+/** @internal */
+const EMPTY_OBJECT = {} as const;
 
 /**
  * This hook is generally used to upload files **to the browser** in different
@@ -209,7 +211,7 @@ const DEFAULT_EXTENSIONS = [] as const;
  */
 export function useFileUpload<E extends HTMLElement, CustomError = never>({
   maxFiles = -1,
-  extensions = DEFAULT_EXTENSIONS,
+  extensions = EMPTY_LIST,
   minFileSize = -1,
   maxFileSize = -1,
   totalFileSize = -1,
@@ -228,10 +230,12 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>({
     ) {
       switch (action.type) {
         case "reset":
+          // need to reuse constants so that calling reset doesn't cause an
+          // infinite loop in an effect
           return {
-            stats: {},
-            errors: [],
-            readers: {},
+            stats: EMPTY_OBJECT,
+            errors: EMPTY_LIST,
+            readers: EMPTY_OBJECT,
           };
         case "remove":
           return {
@@ -337,9 +341,9 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>({
       }
     },
     {
-      stats: {},
-      errors: [],
-      readers: {},
+      stats: EMPTY_OBJECT,
+      errors: EMPTY_LIST,
+      readers: EMPTY_OBJECT,
     }
   );
   const { stats, errors, readers } = state;