fix: 🐛 Rerendering with initial fetching state

✅ Closes: #94

Author: prc5

packages/react/__tests__/features/use-fetch/use-fetch.rerender.spec.tsx

@@ -1,10 +1,20 @@
+import { useRef } from "react";
 import { useDidMount, useDidUpdate } from "@better-hooks/lifecycle";
 import { render } from "@testing-library/react";
 
 import { useFetch } from "hooks/use-fetch";
 import { startServer, resetInterceptors, stopServer, createRequestInterceptor } from "../../server";
 import { client, createRequest, sleep, waitForRender } from "../../utils";
 
+const useWillMount = (fn: () => void) => {
+  const mounted = useRef(false);
+
+  if (!mounted.current) {
+    mounted.current = true;
+    fn();
+  }
+};
+
 describe("useFetch [ Rerender ]", () => {
   let rerenders = 0;
   let request = createRequest();
@@ -38,6 +48,31 @@ describe("useFetch [ Rerender ]", () => {
     createRequestInterceptor(request, { delay: fetchTime });
   });
 
+  // FIXES https://github.com/BetterTyped/hyper-fetch/issues/94
+  it("should start in loading state", async () => {
+    let isLoading = false;
+
+    function Page() {
+      const { loading } = useFetch(request);
+
+      useWillMount(() => {
+        isLoading = loading;
+      });
+
+      rerenders += 1;
+
+      return <div>{loading ? "loading" : "error"}</div>;
+    }
+
+    render(<Page />);
+
+    await waitForDoubleFetch();
+    await sleep(200);
+
+    expect(isLoading).toBe(true);
+    expect(rerenders).toBe(2);
+  });
+
   it("should not rerender when the same data is received from backend", async () => {
     function Page() {
       const { data } = useFetch(request, { refresh: true, refreshTime: 10 });
@@ -88,7 +123,7 @@ describe("useFetch [ Rerender ]", () => {
 
     await waitForDoubleFetch();
 
-    expect(rerenders).toBe(3);
+    expect(rerenders).toBe(2);
   });
   it("should rerender while using the changed key", async () => {
     function Page() {

packages/react/src/helpers/use-tracked-state/use-tracked-state.hooks.ts

@@ -16,7 +16,13 @@ import {
   UseTrackedStateProps,
   UseTrackedStateReturn,
 } from "./use-tracked-state.types";
-import { getDetailsState, getInitialState, getValidCacheData, isStaleCacheData } from "./use-tracked-state.utils";
+import {
+  getDetailsState,
+  getInitialState,
+  getIsInitiallyLoading,
+  getValidCacheData,
+  isStaleCacheData,
+} from "./use-tracked-state.utils";
 
 /**
  *
@@ -33,13 +39,23 @@ export const useTrackedState = <T extends RequestInstance>({
   deepCompare,
   dependencyTracking,
   defaultCacheEmitting = true,
+  /**
+   * useFetch only
+   */
+  disabled,
+  /**
+   * useFetch only
+   */
+  revalidate,
 }: UseTrackedStateProps<T>): UseTrackedStateReturn<T> => {
   const { client, cacheKey, queueKey, cacheTime, responseMapper } = request;
   const { cache, requestManager } = client;
 
   const forceUpdate = useForceUpdate();
 
-  const state = useRef<UseTrackedStateType<T>>(getInitialState(initialData, dispatcher, request));
+  const state = useRef<UseTrackedStateType<T>>(
+    getInitialState({ initialResponse: initialData, dispatcher, request, disabled }),
+  );
   const renderKeys = useRef<Array<keyof UseTrackedStateType<T>>>([]);
   const isProcessingData = useRef("");
 
@@ -84,6 +100,15 @@ export const useTrackedState = <T extends RequestInstance>({
       >(cacheKey);
       const cacheState = getValidCacheData<T>(request, initialData, cacheData);
 
+      // Handle initial loading state
+      state.current.loading = getIsInitiallyLoading({
+        queryKey: request.queueKey,
+        dispatcher,
+        disabled,
+        revalidate,
+        hasState: !!cacheState,
+      });
+
       const hasInitialState = isEqual(initialData?.data, state.current.data);
       const hasState = !!(state.current.data || state.current.error) && !hasInitialState;
       const shouldLoadInitialCache = !hasState && !!state.current.data;
@@ -232,7 +257,7 @@ export const useTrackedState = <T extends RequestInstance>({
           isRetry: false,
           isOffline: false,
         });
-      } else {
+      } else if (loading !== state.current.loading) {
         state.current.loading = loading;
         renderKeyTrigger(["loading"]);
       }

packages/react/src/helpers/use-tracked-state/use-tracked-state.types.ts

@@ -22,6 +22,8 @@ export type UseTrackedStateProps<T extends RequestInstance> = {
   dependencyTracking: boolean;
   defaultCacheEmitting?: boolean;
   deepCompare: boolean | typeof isEqual;
+  disabled?: boolean;
+  revalidate?: boolean;
 };
 
 export type UseTrackedStateReturn<T extends RequestInstance> = [

packages/react/src/helpers/use-tracked-state/use-tracked-state.utils.ts

@@ -64,11 +64,48 @@ export const getTimestamp = (timestamp?: NullableType<number | Date>) => {
   return timestamp ? new Date(timestamp) : null;
 };
 
-export const getInitialState = <T extends RequestInstance>(
-  initialData: NullableType<Partial<ExtractAdapterReturnType<T>>>,
-  dispatcher: Dispatcher,
-  request: T,
-): UseTrackedStateType<T> => {
+export const getIsInitiallyLoading = ({
+  queryKey,
+  dispatcher,
+  hasState,
+  revalidate,
+  disabled,
+}: {
+  queryKey: string;
+  dispatcher: Dispatcher;
+  hasState: boolean;
+  revalidate?: boolean;
+  disabled?: boolean;
+}) => {
+  if (!revalidate && hasState) {
+    return false;
+  }
+
+  const queue = dispatcher.getQueue(queryKey);
+  const isInitiallyLoading = dispatcher.hasRunningRequests(queryKey) || (!queue.stopped && disabled === false);
+
+  return isInitiallyLoading;
+};
+
+export const getInitialState = <T extends RequestInstance>({
+  initialResponse,
+  dispatcher,
+  request,
+  disabled,
+  revalidate,
+}: {
+  initialResponse: NullableType<Partial<ExtractAdapterReturnType<T>>>;
+  dispatcher: Dispatcher;
+  request: T;
+  /**
+   * useFetch only
+   */
+  disabled?: boolean;
+  /**
+   * useFetch only
+   */
+  revalidate?: boolean;
+}): UseTrackedStateType<T> => {
   const { client, cacheKey, responseMapper } = request;
   const { cache } = client;
 
@@ -77,8 +114,15 @@ export const getInitialState = <T extends RequestInstance>(
     ExtractErrorType<T>,
     ExtractAdapterExtraType<ExtractAdapterType<T>>
   >(cacheKey);
-  const cacheState = getValidCacheData<T>(request, initialData, cacheData);
-  const initialLoading = dispatcher.hasRunningRequests(request.queueKey);
+  const cacheState = getValidCacheData<T>(request, initialResponse, cacheData);
+
+  const initialLoading = getIsInitiallyLoading({
+    queryKey: request.queueKey,
+    dispatcher,
+    disabled,
+    revalidate,
+    hasState: !!cacheState,
+  });
 
   if (cacheState) {
     const mappedData = responseMapper ? responseMapper(cacheState) : cacheState;

packages/react/src/hooks/use-fetch/use-fetch.hooks.ts

@@ -71,6 +71,8 @@ export const useFetch = <RequestType extends RequestInstance>(
       initialData,
       deepCompare,
       dependencyTracking,
+      disabled,
+      revalidate,
     });
 
   /**
@@ -94,11 +96,6 @@ export const useFetch = <RequestType extends RequestInstance>(
     if (!disabled) {
       logger.debug(`Fetching data`);
       dispatcher.add(request);
-      const queue = dispatcher.getQueue(request.queueKey);
-      // We want fast initial loading state if not paused / disabled
-      if (!queue.stopped && queue.requests.length) {
-        actions.setLoading(true);
-      }
     } else {
       logger.debug(`Cannot add to fetch queue`, { disabled });
     }