fix: update FilePreview to handle multiple renders in strict mode

Author: doug-s-nava

src/components/forms/FileInput/FilePreview.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { StrictMode } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 
 import { FilePreview } from './FilePreview'
@@ -27,6 +27,16 @@ describe('FilePreview component', () => {
     )
   })
 
+  it('renders without errors when loaded multiple times (simulating react dev mode)', () => {
+    const { getByTestId } = render(
+      <StrictMode>
+        <FilePreview imageId="" file={TEST_TEXT_FILE} />
+      </StrictMode>
+    )
+
+    expect(getByTestId('file-input-preview')).toBeInTheDocument()
+  })
+
   it('renders a preview image', async () => {
     const { getByTestId } = await waitFor(() =>
       render(<FilePreview {...testProps} />)

src/components/forms/FileInput/FilePreview.tsx

@@ -19,18 +19,23 @@ export const FilePreview = ({
   const [isLoading, setIsLoading] = useState(true)
   const [previewSrc, setPreviewSrc] = useState(SPACER_GIF)
   const [showGenericPreview, setShowGenericPreview] = useState(false)
+  const firstRenderRef = useRef(false)
 
   useEffect(() => {
+    if (firstRenderRef.current) {
+      // already run, do nothing
+      return
+    }
+    // only run once
+    firstRenderRef.current = true
+
     fileReaderRef.current.onloadend = (): void => {
       setIsLoading(false)
       setPreviewSrc(fileReaderRef.current.result as string)
+      fileReaderRef.current.onloadend = null // is only run once
     }
 
     fileReaderRef.current.readAsDataURL(file)
-
-    return (): void => {
-      fileReaderRef.current.onloadend = null
-    }
   }, [])
 
   const { name } = file