Building a custom hook for async data fetching

Scenario

Context Multiple pages in an application each implement their own fetch logic with loading and error states, resulting in significant code duplication. The Problem Every component repeats the same useEffect + useState pattern for data fetching, making it hard to maintain and test centrally. Constraints Extract the logic into a custom hook named useFetch. Return { data, loading, error } from the hook. Handle component unmounting to prevent state updates on unmounted components. Expected Deliverable A reusable useFetch custom hook encapsulating async fetching with loading and error states, and cleanup logic to avoid memory leaks.

Targeted skills