mirror of
https://github.com/xtr-dev/payload-feature-flags.git
synced 2025-12-09 18:33:25 +00:00
Fix race condition in fetchFlags useEffect
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 <noreply@anthropic.com>
This commit is contained in:
@@ -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<FeatureFlag>) => {
|
||||
// Security check: Don't allow updates if user doesn't have permission
|
||||
|
||||
Reference in New Issue
Block a user