File: /useBlogPosts.ts
Why it matters: fetch runs in with no AbortController. If the component unmounts or the limit changes quickly, stale async responses can still update state. The problem is that fetch() continues running even after the effect that started it is no longer relevant.
Explanation:
useBlogPosts performs an asynchronous fetch inside useEffect, but the request is not associated with an AbortController or otherwise invalidated when the effect is cleaned up.
When the hook's dependencies change, such as when the requested post limit changes, a new request can start while the previous request is still in flight. Since the requests can complete in a different order from which they were started, an older response can potentially update the hook's state after a newer request has already been issued.
The same applies when the component using the hook unmounts while the request is still pending: the network operation continues even though its result is no longer relevant to the component.
Suggested Fix: Use AbortController
Ignore stale result if the request is canceled or superseded
Keep a safe cleanup in useEffect
File: /useBlogPosts.ts
Why it matters: fetch runs in with no AbortController. If the component unmounts or the limit changes quickly, stale async responses can still update state. The problem is that fetch() continues running even after the effect that started it is no longer relevant.
Explanation:
useBlogPosts performs an asynchronous fetch inside useEffect, but the request is not associated with an AbortController or otherwise invalidated when the effect is cleaned up.
When the hook's dependencies change, such as when the requested post limit changes, a new request can start while the previous request is still in flight. Since the requests can complete in a different order from which they were started, an older response can potentially update the hook's state after a newer request has already been issued.
The same applies when the component using the hook unmounts while the request is still pending: the network operation continues even though its result is no longer relevant to the component.
Suggested Fix: Use AbortController
Ignore stale result if the request is canceled or superseded
Keep a safe cleanup in useEffect