Why does useFetch() cause memory leak problems?

533 Views Asked by At

I encountered a problem while working on a Nuxt 3 project. The problem is simple. My application needs to make a GET call to my API in order to gather information before displaying anything. So I turned to the useFetch() method in the documentation. This method seemed perfect for my case, as it makes the call on the server side. So I can wait for the data before displaying it on the application. Having done this, everything worked perfectly, except for one detail. With the use of useFetch() my application has a lot of memory leaks! Because of this, the size of the heap only increases over time with the trafiic until it reaches the memory limit and then crashes.

To test, I run npm run build then node --inspect .output/server/index.mjs and launch the node.js debugger Memory tab. Between each snapshot, I run my application 1000 times with apache benchmark ab -n 1000 -c 100 http://localhost:3000/. I collect the garbage between each snapshot.

enter image description here

So I recreated a new Nuxt project to see if it was coming from my project or just from useFetch().

Here's my app.vue file:

<script setup>
const url = "https://pokeapi.co/api/v2/pokemon/ditto";
const { data, pending, error } = await useFetch(url);
</script>

<template>
  <div>
    <p v-if="pending">Fetching ...</p>
    <p v-else-if="error">{{ error }}</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

I have exactly the same problem with this new project. So to solve my problem until I really understand why, I replaced const { data, pending, error } = await useFetch(url); with const { data, pending, error } = await useAsyncData(() => $fetch(url)); and miraculously no more memory loss.

So I wonder why useFetch() does this?

0

There are 0 best solutions below