@plugable-io/react 0.0.4 → 0.0.5

package/dist/index.js

@@ -414,6 +414,8 @@ function useFiles({
   const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
   const [page, setPage] = (0, import_react3.useState)(startPage);
   const [hasNext, setHasNext] = (0, import_react3.useState)(false);
+  const previousParamsRef = (0, import_react3.useRef)(null);
+  const isInitialMountRef = (0, import_react3.useRef)(true);
   const effectiveStaleTime = staleTime ?? providerStaleTime;
   const metadataKey = JSON.stringify(metadata);
   const stableMetadata = (0, import_react3.useMemo)(() => metadata, [metadataKey]);
@@ -482,16 +484,23 @@ function useFiles({
     }
   }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection, getCache, setCache, effectiveStaleTime]);
   (0, import_react3.useEffect)(() => {
+    const paramsChanged = previousParamsRef.current !== null && previousParamsRef.current !== paramsKeyWithPage;
+    const isInitialMount = isInitialMountRef.current;
+    previousParamsRef.current = paramsKeyWithPage;
+    if (isInitialMount) {
+      isInitialMountRef.current = false;
+    }
     const cachedEntry = getCache(paramsKeyWithPage);
+    const shouldFetch = paramsChanged || isInitialMount && autoLoad;
     if (cachedEntry) {
       const age = Date.now() - cachedEntry.timestamp;
       const isStale = age > effectiveStaleTime;
       setFiles(cachedEntry.files);
       setHasNext(cachedEntry.paging.has_next_page);
-      if (isStale && autoLoad) {
+      if (paramsChanged || isStale && shouldFetch) {
         fetchFiles(page, true);
       }
-    } else if (autoLoad) {
+    } else if (shouldFetch) {
       fetchFiles(page, true);
     }
   }, [paramsKeyWithPage, autoLoad, getCache, effectiveStaleTime, fetchFiles, page]);

package/dist/index.mjs

@@ -355,7 +355,7 @@ function Dropzone({
 }
 
 // src/hooks/useFiles.ts
-import { useState as useState3, useCallback as useCallback3, useEffect, useMemo as useMemo2 } from "react";
+import { useState as useState3, useCallback as useCallback3, useEffect, useMemo as useMemo2, useRef as useRef2 } from "react";
 function useFiles({
   metadata,
   startPage = 1,
@@ -371,6 +371,8 @@ function useFiles({
   const [isLoading, setIsLoading] = useState3(false);
   const [page, setPage] = useState3(startPage);
   const [hasNext, setHasNext] = useState3(false);
+  const previousParamsRef = useRef2(null);
+  const isInitialMountRef = useRef2(true);
   const effectiveStaleTime = staleTime ?? providerStaleTime;
   const metadataKey = JSON.stringify(metadata);
   const stableMetadata = useMemo2(() => metadata, [metadataKey]);
@@ -439,16 +441,23 @@ function useFiles({
     }
   }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection, getCache, setCache, effectiveStaleTime]);
   useEffect(() => {
+    const paramsChanged = previousParamsRef.current !== null && previousParamsRef.current !== paramsKeyWithPage;
+    const isInitialMount = isInitialMountRef.current;
+    previousParamsRef.current = paramsKeyWithPage;
+    if (isInitialMount) {
+      isInitialMountRef.current = false;
+    }
     const cachedEntry = getCache(paramsKeyWithPage);
+    const shouldFetch = paramsChanged || isInitialMount && autoLoad;
     if (cachedEntry) {
       const age = Date.now() - cachedEntry.timestamp;
       const isStale = age > effectiveStaleTime;
       setFiles(cachedEntry.files);
       setHasNext(cachedEntry.paging.has_next_page);
-      if (isStale && autoLoad) {
+      if (paramsChanged || isStale && shouldFetch) {
         fetchFiles(page, true);
       }
-    } else if (autoLoad) {
+    } else if (shouldFetch) {
       fetchFiles(page, true);
     }
   }, [paramsKeyWithPage, autoLoad, getCache, effectiveStaleTime, fetchFiles, page]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@plugable-io/react",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "React components and hooks for Plugable File Management API",
     "main": "dist/index.js",
     "module": "dist/index.mjs",