Ensure React useAsync calls createPromise once at mount

.eslintrc

@@ -24,6 +24,7 @@
     "prefer-arrow-callback": 0,
     "import/prefer-default-export": "off",
     "import/extensions": ["off", "never"],
+    "newline-per-chained-call": "off",
     "no-param-reassign": ["off", "never"],
     "no-confusing-arrow": "off",
     "implicit-arrow-linebreak": "off",

app/javascript/app/document-capture/hooks/use-async.js

@@ -1,5 +1,4 @@
-import { useState, useCallback } from 'react';
-import useIfStillMounted from './use-if-still-mounted';
+import { useState } from 'react';
 
 /**
  * @typedef SuspenseResource
@@ -26,33 +25,23 @@ import useIfStillMounted from './use-if-still-mounted';
  * @return {SuspenseResource} Suspense resource object.
  */
 function useAsync(createPromise, ...args) {
-  const ifStillMounted = useIfStillMounted();
-  const [data, setData] = useState();
-  const [hasData, setHasData] = useState(false);
-  const [error, setError] = useState();
-  const [hasError, setHasError] = useState(false);
-  const read = useCallback(
-    () =>
-      createPromise(...args)
-        .then(
-          ifStillMounted((nextData) => {
-            setData(nextData);
-            setHasData(true);
-          }),
-        )
-        .catch(
-          ifStillMounted((nextError) => {
-            setError(nextError);
-            setHasError(true);
-          }),
-        ),
-    args,
-  );
+  const [read] = useState(() => {
+    let hasData = false;
+    let data;
+    let hasError = false;
+    let error;
 
-  return {
-    read() {
-      const promise = read();
+    const promise = createPromise(...args)
+      .then((nextData) => {
+        hasData = true;
+        data = nextData;
+      })
+      .catch((nextError) => {
+        hasError = true;
+        error = nextError;
+      });
 
+    return () => {
       if (hasData) {
         return data;
       }
@@ -62,8 +51,10 @@ function useAsync(createPromise, ...args) {
       }
 
       throw promise;
-    },
-  };
+    };
+  });
+
+  return { read };
 }
 
 export default useAsync;

spec/javascripts/app/document-capture/hooks/use-async-spec.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import sinon from 'sinon';
 import render from '../../../support/render';
 import useAsync from '../../../../../app/javascript/app/document-capture/hooks/use-async';
 import SuspenseErrorBoundary from '../../../../../app/javascript/app/document-capture/components/suspense-error-boundary';
@@ -22,12 +23,18 @@ describe('document-capture/hooks/use-async', () => {
 
   it('returns suspense resource that renders fallback', async () => {
     let resolve;
-    const createPromise = () =>
-      new Promise((_resolve) => {
-        resolve = () => {
-          _resolve();
-        };
-      });
+    const createPromise = sinon
+      .stub()
+      .onCall(0)
+      .returns(
+        new Promise((_resolve) => {
+          resolve = () => {
+            _resolve();
+          };
+        }),
+      )
+      .onCall(1)
+      .throws();
 
     const { container, findByText } = render(<Parent createPromise={createPromise} />);
 
@@ -40,12 +47,18 @@ describe('document-capture/hooks/use-async', () => {
 
   it('returns suspense resource that renders error fallback', async () => {
     let reject;
-    const createPromise = () =>
-      new Promise((_resolve, _reject) => {
-        reject = () => {
-          _reject();
-        };
-      });
+    const createPromise = sinon
+      .stub()
+      .onCall(0)
+      .returns(
+        new Promise((_resolve, _reject) => {
+          reject = () => {
+            _reject();
+          };
+        }),
+      )
+      .onCall(1)
+      .throws();
 
     const { container, findByText } = render(<Parent createPromise={createPromise} />);
 

spec/javascripts/support/render.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import sinon from 'sinon';
 import UploadContext from '../../../app/javascript/app/document-capture/context/upload';
 
 /**
@@ -13,11 +14,14 @@ import UploadContext from '../../../app/javascript/app/document-capture/context/
  * @return {import('@testing-library/react').RenderResult}
  */
 function renderWithDefaultContext(element) {
-  return render(
-    <UploadContext.Provider value={(payload) => Promise.resolve(payload)}>
-      {element}
-    </UploadContext.Provider>,
-  );
+  const upload = sinon
+    .stub()
+    .onCall(0)
+    .callsFake((payload) => Promise.resolve(payload))
+    .onCall(1)
+    .throws();
+
+  return render(<UploadContext.Provider value={upload}>{element}</UploadContext.Provider>);
 }
 
 export default renderWithDefaultContext;