Optimise those API calls | ReactJS | Javascript

TL;DR

Learn how to optimize Axios requests in React by using cancel tokens to prevent unnecessary network traffic.

Transcript

hey there everyone hidesh here back again with another video and of course with a better throat i've been suffering from a really really bad throat for a while but things are all okay so thank you so much for all the amazing messages at instagram and now since my throat is good enough uh let's talk about something on javascript as a little bit on t... Read More

Key Insights

• 👏 Special use case scenarios in production-level apps require optimization techniques to improve performance.
• 😀 Continuous server requests as the user types can lead to network congestion and reduced app performance.
• 👻 Cancel tokens in Axios requests allow for the cancellation of previous requests, preventing unnecessary network traffic.
• 👨‍💻 Storing cancel tokens in a more stable manner, such as using states or hooks, improves code stability and reliability.
• 😀 Optimizing requests in React can lead to a more polished and efficient app.
• ❓ The cancel token feature in Axios is not widely discussed, but it provides valuable optimization capabilities.
• 🪝 The tutorial demonstrates a basic implementation of cancel tokens but mentions more advanced techniques using states and hooks.

Questions & Answers

Q: Who is the target audience for this video?

The target audience is people familiar with JavaScript and React, particularly those looking to optimize Axios requests in their React apps.

Q: What is the difference between a regular app and a special use case scenario in the production level?

Regular apps are often simpler and may not require advanced optimization techniques, while special use case scenarios, such as continuous server requests as the user types, require careful optimization to prevent network congestion.

Q: What is the purpose of using cancel tokens in Axios requests?

Cancel tokens allow for the cancellation of previous requests when a new request is made, preventing unnecessary network traffic and optimizing performance.

Q: Are there any potential issues with the code demonstrated in the video?

One issue is that the cancel token is stored in a variable that can be garbage collected, so it is better to store it in a state or using hooks for more stability and control.

Summary & Key Takeaways

• The video discusses the importance of optimizing production-level apps and the difference between regular apps and special use case scenarios.

• The presenter demonstrates a specific use case scenario where a search bar in a React app makes continuous requests to the server as the user types, causing potential network congestion.

• The solution to optimizing this scenario is to use cancel tokens in Axios requests, which allow the cancellation of previous requests when a new one is made.

• The video provides a step-by-step tutorial on how to implement cancel tokens in a React app using Axios.