mirror of
https://github.com/xtr-dev/payload-feature-flags.git
synced 2025-12-10 02:43: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
|
// Debounce search to reduce re-renders
|
||||||
const debouncedSearch = useDebounce(search, 300)
|
const debouncedSearch = useDebounce(search, 300)
|
||||||
|
|
||||||
const fetchFlags = async (signal?: AbortSignal) => {
|
const fetchFlags = useCallback(async (signal?: AbortSignal) => {
|
||||||
try {
|
try {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
setError('')
|
setError('')
|
||||||
@@ -89,7 +89,21 @@ const FeatureFlagsClientComponent = ({
|
|||||||
setLoading(false)
|
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>) => {
|
const updateFlag = useCallback(async (flagId: PayloadID, updates: Partial<FeatureFlag>) => {
|
||||||
// Security check: Don't allow updates if user doesn't have permission
|
// Security check: Don't allow updates if user doesn't have permission
|
||||||
|
|||||||
Reference in New Issue
Block a user