perf: Improve performance of react hook

Author: MattCCC

src/inflight-manager.ts

@@ -41,16 +41,16 @@ const inFlight: Map<string, InFlightItem> = new Map();
  * @param {number} dedupeTime - Deduplication time in milliseconds.
  * @param {boolean} isCancellable - If true, then the previous request with same configuration should be aborted.
  * @param {boolean} isTimeoutEnabled - Whether timeout is enabled.
- * @returns {Promise<AbortController>} - A promise that resolves to an AbortController.
+ * @returns {AbortController} - A promise that resolves to an AbortController.
  */
-export async function markInFlight(
+export function markInFlight(
   key: string | null,
   url: string,
   timeout: number | undefined,
   dedupeTime: number,
   isCancellable: boolean,
   isTimeoutEnabled: boolean,
-): Promise<AbortController> {
+): AbortController {
   if (!key) {
     return new AbortController();
   }

src/react/index.ts

@@ -115,15 +115,11 @@ export function useFetcher<
   );
   const dedupeTime = config.dedupeTime ?? DEFAULT_DEDUPE_TIME_MS;
   const cacheTime = config.cacheTime || INFINITE_CACHE_TIME;
+  const shouldTriggerOnMount = config.immediate ?? true;
 
   const currentValuesRef = useRef(DEFAULT_REF);
   currentValuesRef.current = [url, config, cacheKey];
 
-  const shouldTriggerOnMount = useMemo(
-    () => (config.immediate === undefined ? true : config.immediate),
-    [config.immediate],
-  );
-
   // Attempt to get the cached response immediately and if not available, return null
   const getSnapshot = useCallback(() => {
     const cached = getCache<ResponseData, RequestBody, QueryParams, PathParams>(
@@ -132,8 +128,8 @@ export function useFetcher<
 
     // Only throw for Suspense if we're in 'reject' mode and have no data
     if (
-      cacheKey &&
       config.strategy === 'reject' &&
+      cacheKey &&
       (!cached || (!cached.data && !cached.error))
     ) {
       const pendingPromise = getInFlightPromise(cacheKey, dedupeTime);
@@ -143,7 +139,15 @@ export function useFetcher<
       }
     }
 
-    return cached;
+    return (
+      cached ??
+      (DEFAULT_RESULT as unknown as FetchResponse<
+        ResponseData,
+        RequestBody,
+        QueryParams,
+        PathParams
+      >)
+    );
   }, [cacheKey]);
 
   // Subscribe to cache updates for the specific cache key
@@ -179,19 +183,9 @@ export function useFetcher<
     [cacheKey, shouldTriggerOnMount, url, dedupeTime, cacheTime],
   );
 
-  const state =
-    useSyncExternalStore<FetchResponse<
-      ResponseData,
-      RequestBody,
-      QueryParams,
-      PathParams
-    > | null>(doSubscribe, getSnapshot, getSnapshot) ||
-    (DEFAULT_RESULT as unknown as FetchResponse<
-      ResponseData,
-      RequestBody,
-      QueryParams,
-      PathParams
-    >);
+  const state = useSyncExternalStore<
+    FetchResponse<ResponseData, RequestBody, QueryParams, PathParams>
+  >(doSubscribe, getSnapshot, getSnapshot);
 
   const refetch = useCallback(
     async (forceRefresh = true) => {
@@ -245,15 +239,16 @@ export function useFetcher<
     [cacheKey],
   );
 
-  const isUnresolved = !state.data && !state.error;
-  const isFetching = state.isFetching || false;
+  const data = state.data;
+  const isUnresolved = !data && !state.error;
+  const isFetching = state.isFetching;
   const isLoading =
     !!url && (isFetching || (isUnresolved && shouldTriggerOnMount));
 
   // Consumers always destructure the return value and use the fields directly, so
   // memoizing the object doesn't change rerender behavior nor improve any performance here
   return {
-    data: state.data,
+    data,
     error: state.error,
     config: state.config,
     headers: state.headers,

src/request-handler.ts

@@ -32,15 +32,32 @@ import { withPolling } from './polling-handler';
 import { notifySubscribers } from './pubsub-manager';
 import { addRevalidator } from './revalidator-manager';
 
+const inFlightResponse = {
+  isFetching: true,
+  data: null,
+  error: null,
+};
+
 /**
- * Request function to make HTTP requests with the provided URL and configuration.
+ * Sends an HTTP request to the specified URL using the provided configuration and returns a typed response.
  *
- * @param {string} url - Request URL
- * @param {RequestConfig} reqConfig - Request config passed when making the request
- * @throws {ResponseError} If the request fails or is cancelled
- * @returns {Promise<FetchResponse<ResponseData, RequestBody, QueryParams, PathParams>>} Response Data
+ * @typeParam ResponseData - The expected shape of the response data. Defaults to `DefaultResponse`.
+ * @typeParam RequestBody - The type of the request payload/body. Defaults to `DefaultPayload`.
+ * @typeParam QueryParams - The type of the query parameters. Defaults to `DefaultParams`.
+ * @typeParam PathParams - The type of the path parameters. Defaults to `DefaultUrlParams`.
+ *
+ * @param url - The endpoint URL to which the request will be sent.
+ * @param config - Optional configuration object for the request, including headers, method, body, query, and path parameters.
+ *
+ * @returns A promise that resolves to a `FetchResponse` containing the typed response data and request metadata.
+ *
+ * @example
+ * ```typescript
+ * const { data } = await fetchf<UserData>('/api/user', { method: 'GET' });
+ * console.log(data);
+ * ```
  */
-export async function request<
+export async function fetchf<
   ResponseData = DefaultResponse,
   RequestBody = DefaultPayload,
   QueryParams = DefaultParams,
@@ -55,7 +72,9 @@ export async function request<
   > | null = null,
 ): Promise<FetchResponse<ResponseData, RequestBody, QueryParams, PathParams>> {
   const sanitizedReqConfig = reqConfig ? sanitizeObject(reqConfig) : {};
-  const mergedConfig = mergeConfigs(defaultConfig, sanitizedReqConfig);
+  const mergedConfig = reqConfig
+    ? mergeConfigs(defaultConfig, sanitizedReqConfig)
+    : { ...defaultConfig };
   const fetcherConfig = buildConfig(url, mergedConfig);
 
   let response: FetchResponse<
@@ -68,26 +87,28 @@ export async function request<
   const {
     timeout,
     cancellable,
+    cacheKey,
     dedupeTime,
     cacheTime,
-    cacheKey,
     revalidateOnFocus,
     revalidateOnReconnect,
     pollingInterval = 0,
   } = mergedConfig;
 
-  let _cacheKey: string | null = null;
-
-  // Generate cache key if required
-  if (
+  const needsCacheKey = !!(
     cacheKey ||
-    cacheTime ||
+    timeout ||
     dedupeTime ||
+    cacheTime ||
     cancellable ||
-    timeout ||
     revalidateOnFocus ||
     revalidateOnReconnect
-  ) {
+  );
+
+  let _cacheKey: string | null = null;
+
+  // Generate cache key if required
+  if (needsCacheKey) {
     _cacheKey = generateCacheKey(fetcherConfig);
   }
 
@@ -132,7 +153,16 @@ export async function request<
   >;
 
   // The actual request logic as a function (one poll attempt, with retries)
-  const doRequestOnce = async () => {
+  const doRequestOnce = async (isStaleRevalidation = false) => {
+    // If cache key is specified, we will handle optimistic updates
+    // and mark the request as in-flight, so to catch "fetching" state.
+    // This is useful for Optimistic UI updates (e.g., showing loading spinners).
+    if (_cacheKey && !isStaleRevalidation) {
+      setCache(_cacheKey, inFlightResponse);
+
+      notifySubscribers(_cacheKey, inFlightResponse);
+    }
+
     let attempt = 0;
     let waitTime: number = delay || 0;
     const _retries = retries > 0 ? retries : 0;
@@ -142,7 +172,7 @@ export async function request<
       const url = fetcherConfig.url as string;
 
       // Add the request to the queue. Make sure to handle deduplication, cancellation, timeouts in accordance to retry settings
-      const controller = await markInFlight(
+      const controller = markInFlight(
         _cacheKey,
         url,
         timeout,
@@ -397,32 +427,18 @@ export async function request<
     );
   };
 
-  // If cache key is specified, wrap the request with in-flight management
-  const doRequestWithInFlight = _cacheKey
-    ? async () => {
-        // Optimistic Updates: Reflect that a fetch is happening, so to catch "fetching" state. This can help e.g. with UI updates (e.g., showing loading spinners).
-        const inFlightResponse = {
-          isFetching: true,
-          data: null,
-          error: null,
-          headers: null,
-        };
-        setCache(_cacheKey, inFlightResponse);
-
-        notifySubscribers(_cacheKey, inFlightResponse);
-
-        return doRequestOnce();
-      }
-    : doRequestOnce;
-
   // If polling is enabled, use withPolling to handle the request
-  const doRequestPromise = withPolling(
-    doRequestWithInFlight,
-    pollingInterval,
-    mergedConfig.shouldStopPolling,
-    mergedConfig.maxPollingAttempts,
-    mergedConfig.pollingDelay,
-  );
+  const doRequestPromise = pollingInterval
+    ? withPolling<
+        FetchResponse<ResponseData, RequestBody, QueryParams, PathParams>
+      >(
+        doRequestOnce,
+        pollingInterval,
+        mergedConfig.shouldStopPolling,
+        mergedConfig.maxPollingAttempts,
+        mergedConfig.pollingDelay,
+      )
+    : doRequestOnce();
 
   // If deduplication is enabled, store the in-flight promise immediately
   if (_cacheKey) {
@@ -432,7 +448,7 @@ export async function request<
 
     addRevalidator(
       _cacheKey,
-      doRequestWithInFlight,
+      doRequestOnce,
       undefined,
       mergedConfig.staleTime,
       doRequestOnce,
@@ -450,44 +466,23 @@ export async function request<
  * @param {ResponseError} error               Error instance
  * @returns {boolean}                        True if request is aborted
  */
-const isRequestCancelled = (error: ResponseError): boolean => {
+function isRequestCancelled(error: ResponseError): boolean {
   return error.name === ABORT_ERROR || error.name === CANCELLED_ERROR;
-};
+}
 
 /**
  * Logs messages or errors using the configured logger's `warn` method.
  *
  * @param {RequestConfig} reqConfig - Request config passed when making the request
  * @param {...(string | ResponseError<any>)} args - Messages or errors to log.
  */
-const logger = (
+function logger(
   reqConfig: RequestConfig,
   ...args: (string | ResponseError)[]
-): void => {
+): void {
   const logger = reqConfig.logger;
 
   if (logger && logger.warn) {
     logger.warn(...args);
   }
-};
-
-/**
- * Sends an HTTP request to the specified URL using the provided configuration and returns a typed response.
- *
- * @typeParam ResponseData - The expected shape of the response data. Defaults to `DefaultResponse`.
- * @typeParam RequestBody - The type of the request payload/body. Defaults to `DefaultPayload`.
- * @typeParam QueryParams - The type of the query parameters. Defaults to `DefaultParams`.
- * @typeParam PathParams - The type of the path parameters. Defaults to `DefaultUrlParams`.
- *
- * @param url - The endpoint URL to which the request will be sent.
- * @param config - Optional configuration object for the request, including headers, method, body, query, and path parameters.
- *
- * @returns A promise that resolves to a `FetchResponse` containing the typed response data and request metadata.
- *
- * @example
- * ```typescript
- * const { data } = await fetchf<UserData>('/api/user', { method: 'GET' });
- * console.log(data);
- * ```
- */
-export const fetchf = request;
+}

src/response-parser.ts

@@ -114,6 +114,7 @@ export const prepareResponse = <
   if (!response) {
     return {
       ok: false,
+      isFetching: false,
       // Enhance the response with extra information
       error,
       data: defaultResponse ?? null,
@@ -171,13 +172,15 @@ export const prepareResponse = <
       data,
       headers,
       config,
+      isFetching: false,
     };
   }
 
   // If it's a custom fetcher, and it does not return any Response instance, it may have its own internal handler
   if (isObject(response)) {
     response.error = error;
     response.headers = headers;
+    response.isFetching = false;
   }
 
   return response;

src/revalidator-manager.ts

@@ -20,7 +20,9 @@ import { addTimeout, removeTimeout } from './timeout-wheel';
 import { FetchResponse } from './types';
 import { isBrowser, noop, timeNow } from './utils';
 
-export type RevalidatorFn = () => Promise<FetchResponse | null>;
+export type RevalidatorFn = (
+  isStaleRevalidation?: boolean,
+) => Promise<FetchResponse | null>;
 
 type EventType = 'focus' | 'online';
 
@@ -73,7 +75,7 @@ export function revalidateAll(
     const revalidator = isStaleRevalidation ? entry[4] : entry[0];
 
     if (revalidator) {
-      Promise.resolve(revalidator()).catch(noop);
+      Promise.resolve(revalidator(isStaleRevalidation)).catch(noop);
     }
   });
 }
@@ -105,7 +107,7 @@ export async function revalidate<T = unknown>(
 
     // If no revalidator function is registered, return null
     if (revalidator) {
-      return await revalidator();
+      return await revalidator(isStaleRevalidation);
     }
   }
 

src/types/request-handler.ts

@@ -86,7 +86,7 @@ export interface ExtendedResponse<
   > | null;
   headers: HeadersObject & HeadersInit;
   config: RequestConfig<ResponseData, QueryParams, PathParams, RequestBody>;
-  isFetching?: boolean;
+  isFetching: boolean;
 }
 
 /**