From e26d895864ce144fd1876d356c207297051c6c35 Mon Sep 17 00:00:00 2001 From: Bas van den Aakster Date: Fri, 3 Oct 2025 17:54:50 +0200 Subject: [PATCH] Fix race condition in fetchFlags useEffect MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Addresses race condition where fetchFlags could cause memory leaks and state updates after component unmount: - Convert fetchFlags to useCallback with AbortSignal support - Add useEffect with AbortController for proper request cancellation - Prevent state updates when requests are aborted - Handle AbortError gracefully without showing error messages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/views/FeatureFlagsClient.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/views/FeatureFlagsClient.tsx b/src/views/FeatureFlagsClient.tsx index ed0919c..36c4590 100644 --- a/src/views/FeatureFlagsClient.tsx +++ b/src/views/FeatureFlagsClient.tsx @@ -50,7 +50,7 @@ const FeatureFlagsClientComponent = ({ // Debounce search to reduce re-renders const debouncedSearch = useDebounce(search, 300) - const fetchFlags = async (signal?: AbortSignal) => { + const fetchFlags = useCallback(async (signal?: AbortSignal) => { try { setLoading(true) setError('') @@ -89,7 +89,21 @@ const FeatureFlagsClientComponent = ({ setLoading(false) } } - } + }, [config.serverURL, config.routes.api, collectionSlug, maxFlags]) + + useEffect(() => { + const abortController = new AbortController() + + const loadFlags = async () => { + await fetchFlags(abortController.signal) + } + + loadFlags() + + return () => { + abortController.abort() + } + }, [fetchFlags]) // Re-fetch if fetchFlags function changes const updateFlag = useCallback(async (flagId: PayloadID, updates: Partial) => { // Security check: Don't allow updates if user doesn't have permission