Episode 26 of 32

Reusing Custom Hooks

See how the useFetch custom hook can be reused across different components.

Our useFetch hook works for any URL — making it incredibly reusable.

In Home Component

const { data: blogs, isPending, error } = useFetch(
  "http://localhost:8000/blogs"
);

In BlogDetails Component

const { data: blog, isPending, error } = useFetch(
  "http://localhost:8000/blogs/" + id
);

Benefits of Custom Hooks

  • DRY code — Write fetch logic once
  • Separation of concerns — Logic separated from UI
  • Easy to test — Test the hook independently
  • Reusable — Works for any API endpoint