@izumisy-tailor/tailor-data-viewer 0.1.7 → 0.1.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

package/src/component/hooks/use-table-access-check.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { GraphQLClient } from "graphql-request";
 import type { TableMetadata } from "../../generator/metadata-generator";
 
@@ -23,6 +23,11 @@ export function useTableAccessCheck(
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // Memoize tables to prevent infinite loops
+  // when the parent component passes a new array reference on each render
+  const tableKey = tables.map((t) => t.name).join(",");
+  const stableTables = useMemo(() => tables, [tableKey]);
+
   useEffect(() => {
     let cancelled = false;
 
@@ -39,7 +44,7 @@ export function useTableAccessCheck(
       });
 
       const results = await Promise.allSettled(
-        tables.map(async (table) => {
+        stableTables.map(async (table) => {
           // Execute a lightweight aggregate query to check access
           const query = `query CheckAccess { ${table.pluralForm}(query: {}) { total } }`;
           await client.request(query);
@@ -73,7 +78,7 @@ export function useTableAccessCheck(
     return () => {
       cancelled = true;
     };
-  }, [tables, appUri]);
+  }, [stableTables, appUri]);
 
   return { accessibleTables, isLoading, error };
 }