@startsimpli/hooks 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/hooks",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Shared React hooks for StartSimpli apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/useSavedViews.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 
 export interface SavedView {
   id: string
@@ -37,10 +37,20 @@ export function useSavedViews<T extends SavedView>({
     error: null,
   })
 
+  // Store callbacks in refs to avoid infinite loops when callers pass inline functions
+  const loadFnRef = useRef(loadFn)
+  const saveFnRef = useRef(saveFn)
+  const updateFnRef = useRef(updateFn)
+  const deleteFnRef = useRef(deleteFn)
+  loadFnRef.current = loadFn
+  saveFnRef.current = saveFn
+  updateFnRef.current = updateFn
+  deleteFnRef.current = deleteFn
+
   const fetchViews = useCallback(async () => {
     setState(prev => ({ ...prev, loading: true, error: null }))
     try {
-      const views = await loadFn(resource)
+      const views = await loadFnRef.current(resource)
       const defaultView = views.find(v => v.isDefault)
       setState(prev => ({
         ...prev,
@@ -55,7 +65,7 @@ export function useSavedViews<T extends SavedView>({
         error: error instanceof Error ? error.message : 'Failed to load views',
       }))
     }
-  }, [resource, loadFn])
+  }, [resource])
 
   useEffect(() => {
     fetchViews()
@@ -63,7 +73,7 @@ export function useSavedViews<T extends SavedView>({
 
   const saveView = useCallback(
     async (viewData: Omit<T, 'id' | 'createdAt'>): Promise<T> => {
-      const newView = await saveFn(resource, viewData)
+      const newView = await saveFnRef.current(resource, viewData)
       setState(prev => ({
         ...prev,
         views: [...prev.views, newView],
@@ -71,27 +81,27 @@ export function useSavedViews<T extends SavedView>({
       }))
       return newView
     },
-    [resource, saveFn]
+    [resource]
   )
 
   const updateView = useCallback(
     async (viewId: string, updates: Partial<T>): Promise<void> => {
-      await updateFn(resource, viewId, updates)
+      await updateFnRef.current(resource, viewId, updates)
       await fetchViews()
     },
-    [resource, updateFn, fetchViews]
+    [resource, fetchViews]
   )
 
   const deleteView = useCallback(
     async (viewId: string): Promise<void> => {
-      await deleteFn(resource, viewId)
+      await deleteFnRef.current(resource, viewId)
       setState(prev => ({
         ...prev,
         views: prev.views.filter(v => v.id !== viewId),
         currentViewId: prev.currentViewId === viewId ? null : prev.currentViewId,
       }))
     },
-    [resource, deleteFn]
+    [resource]
   )
 
   const loadView = useCallback((viewId: string) => {