Configuring Axios Instances for Reuse

Learn to create a reusable Axios instance with shared baseURL, headers, and timeouts.

We'll cover the following...

Understand Axios instance
- Example: Centralizing Axios configuration
Practice exercises
- Exercise: Add a custom timeout and simulate timeout error
- Exercise: Extend the instance with a new default header

As projects grow, API calls start multiplying — fetching users, posts, comments, settings — each needing identical headers, timeouts, and error handling. Writing these options in every axios.get() call creates redundancy and inconsistency. React encourages composability and reuse, and Axios makes this easy through instances.

Understand Axios instance

An Axios instance lets us define all our defaults — like a base URL, common headers, or timeout — once, and reuse them everywhere. This keeps components focused on rendering logic while API details stay neatly abstracted away.

An Axios instance is a preconfigured copy of Axios. Instead of using the global axios, we create our own version with specific defaults.