update the data reader in a useMemo instead of a useEffect (#8)

Author: andreiduca

README.md

@@ -220,7 +220,7 @@ function Author(props) {
 ```
 
 
-### Preloading resources
+### 🚚 Preloading resources
 
 When you know a resource will be consumed by a child component, you can preload it ahead of time.
 This is useful in cases such as lazy loaded components, or when trying to predict a user's intent.
@@ -291,10 +291,10 @@ because that happened in the parent when the user hovered the button.
 At the same time, if the data is ready before the code loads, it will be available immediately
 when the child component will render for the first time. 
 
+
 ### Clearing caches
 
-In some instances however, you really need to re-fetch a resource (after updating a piece of data for example),
-so you'll need to clear the cached results. You can manually clear caches by using the `resourceCache` helper.
+Finally, you can manually clear caches by using the `resourceCache` helper.
 
 ```tsx
 import { useAsyncResource, resourceCache } from 'use-async-resource';

lib/useAsyncResource.js

@@ -1,6 +1,6 @@
 {
   "name": "use-async-resource",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A custom React hook for simple data fetching with React Suspense",
   "keywords": [
     "react",

lib/useAsyncResource.js.map

@@ -9,10 +9,12 @@ import { suspendFor } from './test.helpers';
 describe('useAsyncResource', () => {
   const apiFn = (id: number) => Promise.resolve({ id, name: 'test name' });
   const apiSimpleFn = () => Promise.resolve({ message: 'success' });
+  const apiFailingFn = () => Promise.reject({ message: 'error' });
 
   afterEach(() => {
     resourceCache(apiFn).clear();
     resourceCache(apiSimpleFn).clear();
+    resourceCache(apiFailingFn).clear();
   });
 
   it('should create a new data reader', async () => {
@@ -33,6 +35,16 @@ describe('useAsyncResource', () => {
     expect(simpleData()).toStrictEqual({ message: 'success' });
   });
 
+  it('should throw an error', async () => {
+    const { result } = renderHook(() => useAsyncResource(apiFailingFn, []));
+    const [dataReader] = result.current;
+
+    // wait for it to fulfill
+    await suspendFor(dataReader);
+
+    expect(dataReader).toThrowError(Error('error'));
+  });
+
   it('should trigger an update for the data reader', async () => {
     // get the data reader and the updater function from the custom hook
     const { result } = renderHook(() => useAsyncResource(apiFn, 1));

package.json

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 import {
   ApiFn,
@@ -59,56 +59,42 @@ export function useAsyncResource<ResponseType, ArgTypes extends any[]>(
   apiFunction: ApiFn<ResponseType> | ApiFn<ResponseType, ArgTypes>,
   ...parameters: ArgTypes
 ) {
-  const firstRender = useRef(true);
+  // keep the data reader inside a mutable object ref
+  // always initialize with a lazy data reader, as it can be overwritten by the useMemo immediately
+  const dataReaderObj = useRef<DataOrModifiedFn<ResponseType> | LazyDataOrModifiedFn<ResponseType>>(() => undefined);
 
-  // initialize the data reader
-  const [dataReader, updateDataReader] = useState(() => {
-    // lazy initialization, when no parameters are passed
-    if (!parameters.length) {
-      // we return an empty data reader function
-      return (() => undefined) as LazyDataOrModifiedFn<ResponseType>;
-    }
-
-    // eager initialization for api functions that don't accept arguments
-    if (
-      // check that the api function doesn't take any arguments
-      !apiFunction.length &&
-      // but the user passed an empty array as the only parameter
-      parameters.length === 1 &&
-      Array.isArray(parameters[0]) &&
-      parameters[0].length === 0
-    ) {
-      return initializeDataReader(apiFunction as ApiFn<ResponseType>);
+  // like useEffect, but runs immediately
+  useMemo(() => {
+    if (parameters.length) {
+      // eager initialization for api functions that don't accept arguments
+      if (
+        // check that the api function doesn't take any arguments
+        !apiFunction.length &&
+        // but the user passed an empty array as the only parameter
+        parameters.length === 1 &&
+        Array.isArray(parameters[0]) &&
+        parameters[0].length === 0
+      ) {
+        dataReaderObj.current = initializeDataReader(apiFunction as ApiFn<ResponseType>);
+      } else {
+        // eager initialization for all other cases
+        dataReaderObj.current = initializeDataReader(
+          apiFunction as ApiFn<ResponseType, ArgTypes>,
+          ...parameters,
+        );
+      }
     }
+  }, [apiFunction, ...parameters]);
 
-    // eager initialization for all other cases
-    return initializeDataReader(
-      apiFunction as ApiFn<ResponseType, ArgTypes>,
-      ...parameters,
-    );
-  });
+  // state to force re-render
+  const [, forceRender] = useState(0);
 
-  // the updater function
-  const updater = useCallback(
-    (...newParameters: ArgTypes) => {
-      updateDataReader(() =>
-        initializeDataReader(
-          apiFunction as ApiFn<ResponseType, ArgTypes>,
-          ...newParameters,
-        ),
-      );
-    },
-    [apiFunction],
-  );
-
-  // automatically call the updater function every time the params of the hook change
-  useEffect(() => {
-    if (firstRender.current) {
-      firstRender.current = false;
-    } else if (apiFunction.length > 0) {
-      updater(...parameters);
-    }
-  }, [...parameters]);
+  const updaterFn = useCallback((...newParameters: ArgTypes) => {
+    // update the object ref
+    dataReaderObj.current = initializeDataReader(apiFunction as ApiFn<ResponseType, ArgTypes>, ...newParameters);
+    // update state to force a re-render
+    forceRender(ct => 1 - ct);
+  }, [apiFunction]);
 
-  return [dataReader, updater];
+  return [dataReaderObj.current, updaterFn];
 }