fix: stale use effect

README.md

@@ -41,7 +41,7 @@ const Changelog = () => {
     <div>
       <h1>{changelog.title}</h1>
       <ul>
-        {changelog.entries.map(entry => (
+        {changelog.entries.map((entry) => (
           <li key={entry.id}>{entry.version}</li>
         ))}
       </ul>
@@ -53,7 +53,10 @@ const Changelog = () => {
 ### Component
 
 ```tsx
-import { ChangelogContainer, MinimalChangelogList, } from '@wertarbyte/updatehive-react';
+import {
+  ChangelogContainer,
+  MinimalChangelogList,
+} from '@wertarbyte/updatehive-react';
 
 return (
   <ChangelogContainer
@@ -101,11 +104,9 @@ The library can be easily testet in dev mode via the provided 'dev' script and A
 ```
 # npm
 npm run dev
-
-# yarn
-yarn dev
 ```
 
-### ChangelogLists 
+### ChangelogLists
+
 ChangelogLists are split into public (API) classes and their internal representation, to
-separate concerns and allow for easier reusage.
+separate concerns and allow for easier reusage.

lib/changelog.hook.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   Changelog,
   UpdateHiveConfig,
@@ -27,47 +27,56 @@ export function useChangelogs(config: UpdateHiveConfig): UpdateHiveHookResult {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | undefined>();
 
-  const fetchData = async () => {
-    setIsLoading(true);
+  const requestURL = useMemo(() => buildRequestURL(config), [config]);
+  const apiKey = config.connection.API_KEY;
 
-    const requestURL = buildRequestURL(config);
-
-    try {
-      const result = await fetch(requestURL, {
-        headers: {
-          Authorization: `Bearer ${config.connection.API_KEY}`,
-          Accept: 'application/vnd.wertarbyte.changelog.v1+json',
-        },
-      });
+  useEffect(() => {
+    const ac = new AbortController();
 
-      if (!result.ok) {
-        const error = await result.json();
-        throw new Error(error.message);
-      }
+    void (async () => {
+      setIsLoading(true);
 
-      const resultData: Changelog[] | undefined = await result.json();
+      try {
+        const result = await fetch(requestURL, {
+          headers: {
+            Authorization: `Bearer ${apiKey}`,
+            Accept: 'application/vnd.wertarbyte.changelog.v1+json',
+          },
+          signal: ac.signal,
+        });
 
-      if (resultData) {
-        setData(
-          resultData.sort((a, b) => Date.parse(b.releaseDate) - Date.parse(a.releaseDate)),
-        );
+        if (!result.ok) {
+          const error = await result.json();
+          throw new Error(error.message);
+        }
+        const resultData: Changelog[] | undefined = await result.json();
+        if (resultData) {
+          setData(
+            resultData.sort(
+              (a, b) => Date.parse(b.releaseDate) - Date.parse(a.releaseDate),
+            ),
+          );
+        } else {
+          setError('Did not receive a changelog.');
+        }
+      } catch (error) {
+        if (error instanceof Error) {
+          if (error.name === 'AbortError') {
+            return; // fetch aborted, ie. unmounted component or config changed
+          }
+          setError(error.message);
+        } else {
+          setError('An unknown error occurred.');
+        }
       }
-    } catch (error) {
-      if (error instanceof Error) {
-        setError(error.message);
-      } else {
-        setError('An unknown error occurred.');
-      }
-    }
 
-    setIsLoading(false);
-  };
+      setIsLoading(false);
+    })();
 
-  useEffect(() => {
-    void fetchData();
-    // Explicitly set to empty array to avoid multiple requests.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    return () => {
+      ac.abort();
+    };
+  }, [apiKey, requestURL]);
 
   return {
     loading: isLoading,

lib/changelog.types.ts

@@ -1,21 +1,25 @@
 /**
  * Configuration to retrieve changelogs from UpdateHive.
- *
- * @param connection
- *    API_KEY:        API_KEY to access UpdateHive public REST API.
- *    url:            Override the default URL to UpdateHive API.
- *
- * @param changelogs
- *    product:        Product ID to retrieve changelogs for.
- *    onlyLast:       Retrieve only the last changelog.
  */
 export type UpdateHiveConfig = {
   connection: {
+    /**
+     * API_KEY to access UpdateHive public REST API.
+     */
     API_KEY: string;
+    /**
+     * Override the default URL to UpdateHive API.
+     */
     url?: string;
   };
   changelogs: {
+    /**
+     * Product ID to retrieve changelogs for.
+     */
     product: string;
+    /**
+     * Retrieve only the last changelog.
+     */
     onlyLast?: boolean;
   };
 };