Custom hooks are one of React's most powerful features. They let you extract component logic into reusable functions. In this article, we'll build a hook for API calls that handles loading, errors, and data.

The Basic Structure

Let's start with a basic hook that manages our three states: data, loading, and error. We'll use TypeScript generics to make it type-safe.

Adding Refetch Capability

Often you'll want to refetch data after a user action. Let's add a refetch function to our hook.

Usage Example

Here's how you'd use the hook in a component. The generic type ensures type safety throughout.

Key Takeaways

• Custom hooks encapsulate reusable logic
• TypeScript generics provide type safety
• useCallback prevents unnecessary re-fetches
• Exposing a refetch function adds flexibility

This is just the foundation. You could extend it with caching, request cancellation, or optimistic updates. The beauty of custom hooks is that complexity stays encapsulated.