[B] Use ref rather than state for useFetch count

The triggerFetchData callback was calling setState, which beginning in
React 18 triggers a re-render when used with renderToString. That meant
every component that called useFetch on the server experienced a
double render. This commit eliminates the extra render by using
useRef rather than useState to track the count.

Author: dananjohnson

client/src/hooks/api/useFetch/index.js

@@ -31,7 +31,7 @@ export default function useFetch({
   const firstRun = useRef(true);
   const uid = `fetch_${useUID()}`;
   const [requestKey] = useState(options.requestKey ?? `fetch_${useUID()}`);
-  const [count, setCount] = useState(1);
+  const count = useRef(1);
   const store = useStore();
   const getState = store.getState;
   const dispatch = useDispatch();
@@ -48,7 +48,7 @@ export default function useFetch({
 
   const [apiCall, ...apiCallArgs] = request;
 
-  if (count > 25)
+  if (count.current > 25)
     throw new Error(
       `useFetch tried to fetch data more than 25 times. This suggests that an input to
       useFetch needs to be memoized.`
@@ -58,7 +58,7 @@ export default function useFetch({
   const triggerFetchData = useCallback(() => {
     if (!condition) return Promise.resolve();
     log("useFetch", requestKey);
-    setCount(count + 1);
+    count.current += 1;
     const apiFetch = apiCall(...apiCallArgs);
     const action = entityStoreActions.request(apiFetch, requestKey, options);
     const { promise } = dispatch(action);