Composable for API calls (useFetch pattern) in Vue - Performance & Optimization

Performance: Composable for API calls (useFetch pattern)

MEDIUM IMPACT

This pattern affects page load speed and interaction responsiveness by managing when and how API data is fetched and rendered.

Fetching data from an API in multiple components

Vue

import { ref } from 'vue';

export function useFetchUser() {
  const user = ref(null);
  const loading = ref(false);
  const error = ref(null);

  async function fetchUser() {
    loading.value = true;
    try {
      const res = await fetch('https://api.example.com/user');
      user.value = await res.json();
    } catch (e) {
      error.value = e;
    } finally {
      loading.value = false;
    }
  }

  return { user, loading, error, fetchUser };
}

// Components import and reuse this composable

Centralizes API call, caches data, and shares state, reducing network requests and re-renders.

📈 Performance GainSingle network request reused, fewer reflows, faster interaction response.

Fetching data from an API in multiple components

Vue

export default {
  data() {
    return { user: null };
  },
  async mounted() {
    const res = await fetch('https://api.example.com/user');
    this.user = await res.json();
  }
};

// Repeated in every component needing user data

Each component fetches the same data independently, causing multiple network requests and redundant state updates.

📉 Performance CostTriggers multiple network requests and reflows, increasing load time and interaction delay.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Independent fetch in each component	Multiple redundant DOM updates	Multiple reflows per fetch	High paint cost due to repeated updates	[X] Bad
Composable useFetch pattern with shared state	Single DOM update per data change	Single reflow per data update	Lower paint cost with minimal updates	[OK] Good

Rendering Pipeline

The composable triggers the fetch during component setup or on demand, updating reactive state that causes minimal re-rendering only when data changes.

→Network Request

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork Request and JavaScript Execution when fetching and processing data

Core Web Vital Affected

INP

This pattern affects page load speed and interaction responsiveness by managing when and how API data is fetched and rendered.

Optimization Tips

1Reuse API call logic in a composable to avoid duplicate requests.

2Update reactive state minimally to reduce reflows and paints.

3Fetch data lazily or on demand to avoid blocking initial rendering.

Performance Quiz - 3 Questions

What is the main performance benefit of using a composable for API calls in Vue?

A It delays rendering until all components finish fetching.

B It increases the number of network requests for faster data.

C It reduces redundant network requests by sharing fetched data.

D It forces components to fetch data independently.

DevTools: Performance

How to check: Record a session while loading the page and interacting with components. Look for multiple network requests to the same API endpoint and repeated layout or paint events.

What to look for: Fewer network requests and reduced layout/paint events indicate better performance with composable pattern.