You are using useFetch WRONG! (I hope you don't)

Summary

In this video, the host explores common misuses of the 'useFetch' composable in Vue.js, demonstrating how improper usage can lead to unintended API calls. They present a demo application with a login form to illustrate the issue and its resolution. The video clarifies the difference between 'useFetch' and '$fetch', emphasizing that 'useFetch' should be used at the top level in the script setup block, not in event handlers. It also introduces a pattern for using 'useFetch' with an 'execute' function for controlled data fetching, offering solutions to prevent excessive API requests and ensuring optimal application performance.

Takeaways

• 😀 The video discusses common misuses of the `useFetch` composable and its consequences in a Vue.js application.
• 🔍 The presenter demonstrates how misuse can lead to unintended API calls, using a simple login form demo application.
• ⚠️ A key issue highlighted is using `useFetch` directly in event handlers or functions, rather than at the top level in the `<script setup>` block.
• 🛠 To fix problems caused by misuse, the video suggests using `$fetch` directly for simple data fetching without the reactive features of `useFetch`.
• 💡 The presenter explains that `useFetch` is designed to react to changes in reactive values, which is not desired in all scenarios, like form submissions.
• 📚 It's recommended to use `useFetch` at the top level in the `<script setup>` block to leverage its reactivity for data that needs to be refreshed.
• 🔧 For non-reactive data fetching, such as form submissions, using `$fetch` with a try-catch block is shown as a clean solution.
• 🔄 The video also introduces a pattern to use `useFetch` in a controlled manner by disabling its automatic execution and providing an `execute` function.
• 👍 The presenter encourages the use of `useFetch` for data that needs to be reactive and `$fetch` for straightforward data fetching tasks.
• 📝 A rule of thumb provided is to use `$fetch` for button clicks and form submissions, and `useFetch` for data that requires server-side rendering and reactivity.

Q & A

What is the main issue discussed in the video regarding the use of 'useFetch'?

The main issue discussed is the misuse of 'useFetch' as a data fetching function instead of a composable, which can lead to unintended API calls and performance issues.

Why does the video creator suggest avoiding using 'useFetch' in event handlers?

Using 'useFetch' in event handlers can cause multiple API calls due to its reactivity, as it watches the reactive values and triggers calls on changes, which is not desired in such scenarios.

What is the alternative to 'useFetch' suggested in the video for handling form submissions?

The video suggests using '$fetch' for form submissions, as it does not have the reactivity of 'useFetch' and will only make a single API call when invoked.

How can one prevent 'useFetch' from watching reactive values in the video's context?

To prevent 'useFetch' from watching reactive values, one can set 'immediate' to false and 'watch' to false, which stops the composable from executing immediately or watching the reactive values.

What is the purpose of the 'execute' function in the context of 'useFetch'?

The 'execute' function, also known as a 'refresh' function, is used to manually trigger 'useFetch' without its reactivity, allowing for controlled API calls when needed.

Why does the video emphasize the importance of calling 'useFetch' at the top level in the script setup block?

Calling 'useFetch' at the top level ensures that it is used as a composable and not within event handlers or functions where it could lead to unintended side effects.

What is the recommended approach when dealing with API calls for service head rendering?

For service head rendering, 'useFetch' is recommended as it can handle reactivity and provide benefits like pending state, but it should be used carefully to avoid misuse.

What is the role of the 'onResponse' function in the demo application shown in the video?

The 'onResponse' function in the demo application is used to track the number of API calls made, helping to demonstrate the impact of using 'useFetch' incorrectly.

How does the video demonstrate the misuse of 'useFetch'?

The video demonstrates the misuse of 'useFetch' by showing how it can lead to an increasing number of API calls when used within an event handler, instead of making a single call as expected.

What is the significance of the 'Network Tools' in the video's demonstration?

The 'Network Tools' are used to visually track and demonstrate the number of API calls made, which helps to illustrate the consequences of misusing 'useFetch'.