Optimise those API calls | ReactJS | Javascript

Welcome to a youtube channel dedicated to programming and coding related tutorials. We talk about tech, write code, discuss about cloud and devops. That’s what we do all day, all year. We roll out a lot of series and videos on our channel.
All the learning resources such as code files, documentations, articles and community discussions are available on our website:
chaicode.com/
You can find our discord link, github link etc on the above website.
Twitter/X link: x.com/hiteshdo...
Discord link: hitesh.ai/discord
Learn React with 10 projects: • Let's learn react from...
Learn Docker: • A practical guide on D...
Learn Kubernetes: • Complete Kubernetes Co...
How does a browser works: • How does a browser wor...
How nodejs works: • How node JS works | En...
Learn Redux-toolkit: • Learn Redux Toolkit in...
Learn NextJS: • Nextjs Full stack course
Learn Typescript: • Why to learn Typescript
Learn Javascript: • Welcome to new JavaScr...
Learn React Native: • React Native Mastery: ...
Learn Zustand: • React state management...
Learn Golang: • How to get started wit...

[@akshatsethi6384]

It would be very awesome if we could get a course on production-grade applications

[@arifdevcoding]

just thinking, I WISH I COULD JOIN YOUR TEAM!

[@CREATIVEEXPERTZ]

Sir Waiting For a Video on your VS Code

[@harishg1762]

is it a good practice to set a timeout of 1s or so in the useEffect and clearing the timeout in the cleanup to execute the API hit? basically waiting for 1s for the user input, if we didnt receive any input we'll execute the axios part else clear the timeout and again wait for a second. is this a good approach for the search!? Thanks in advance :-)

[@fariduzzamaansari1656]

It is a good approach. It's called debounced search.

[@harishg1762]

@@fariduzzamaansari1656 ok got it!! Thank u :-)

[@akashdeepnandi]

A out of the box feature which I didn't know about, very informative. Typically we use debouncing or throttling depending on the use case.

[@nirvanacore5543]

this is really worth watching, so many things we don't know as fresher and getting info at the exact time when you needed it is a boon. Thanks for sharing :)

[@JaspreetSingh2701]

Do not you think it would be great if we use Throttling for this case? CancelToken is used when we have huge data (upload) ??

[@tejkumarkempaiah4906]

Can you please suggest a video on finding all broken links in an application using an app URLs?

[@asitprakash6445]

@Hitesh Choudhary Good to see you back, loved the video.. The intro was great

[@satwikanmol]

Pardon my newbie knowledge of React but why did you use typepf at 13:50 at line 9 when if (cancelToken) was sufficient.

[@nishchay3200]

I also did kind of the same thing couple of days back, but by using 'debouncing', another cool concept.

[@cyrusthapa4149]

Stephen grinder course ?? 🌝

[@harshtomar2610]

Great Tutorial. However my question is why can't we implement something using setTimeout so that we make request only when user has stopped typing? Would love to hear your thoughts on this approach

[@CodtachiYoutube]

Hey which font you are using in vs-code? is it 'fira-code' ?

[@riteshsinha216]

We can use debounce instead of cancelToken 👀

[@niklausmikaelson7332]

We can use deboucing here?

[@romimaximus]

Great tutorial, 😎👍!!, what i like to is, check if the user typed at least 3 characters in the input field, then i send the 'http request'...

[@kapilchhabra3028]

It's quite simple to understand, thanks for sharing and looks forward for your amazing videos. Love it 😍

[@RajivKumar-en9gf]

What about using denounce Here??

[@fourhourlife8594]

Why can’t you use an on Submit or on Click?

[@SnehilCodes]

What I got from this is, it can cancel previous requests if they arent completed. So this doesn't make much difference in case of a very high speed internet. I'd still prefer debouncing using setTimeout fir this particular scenario.

[@livesamarth]

In the product in which I work, we run an interval of 300ms, if any change is detected within 300ms, we cancel the request, if no changes made within 300ms, a request will be made.

[@0xedb]

this can also be done with AbortController

[@sivaganesh4489]

Awesome video. i guess axios internally implements debounce technique for optimization

[@indrajeetgiri8099]

Thanks Got To Learn Something New About Axios But My Question Is Can We Use Throttling Or Debouncing Instead Of Cancel Token To Achieve The Same....

[@atul7173]

Thank you Hitesh for this wonderful missed out feature of axios....😁

[@ritiknandanwar8198]

.....or we can use debouncing

[@kalyanipriyadarsini]

Can you prepare laravel course.

[@beginnerbytes4575]

Thank you sir, and what are your thoughts regarding debouncer in production?

[@ashifiqbal]

I understand the usecase but can it also not be achieved by just putting a delay before making a request (which would also reduce the load on the server + client's traffic). We can wait for some amount of time (may be some hundred milliseconds) before firing the api call and we fire the api call only after the said amount of time interval from the last on-change event (last time the user entered something).

[@aniketchaudhari5062]

Thanks for this video, Great explanation!

[@kabirrsinghsahni7792]

Hi Hitesh, can we use these cancel tokens in pure js, if yes then how

[@adipradhan3506]

Man the intro is dope ⭐⭐

[@piotrekjazz1287]

come on man you said that the source code is available below, where?

[@imkir4n]

Received notification when i was in LearnCodeOnline

[@kamaljha8946]

Very helpful video sir

[@jayantjagtap2976]

Could try typescript. It makes understanding code so easy and fix bugs and issues before hand. By the way thanks for cancel Token👍

[@kkyangyang]

Wait why not just use debounce

[@omjogani]

We need VSCODE theme Video, sir? now how long we have to wait for it?

[@vijayarangans9987]

thalaiva you are great

[@mangaldeepdas88]

Thanks a lot sir 🙏

[@mayanksahu5172]

Take care of yourself ❤️. Thankyou soo much

[@vaibhavjadhav8987]

Why you are not suggesting Debouncing and Throttling here???

[@HiteshCodeLab]

Surely that can be used but here we don’t want just 1 request to go. Use case here is to cancel previous request. But nice question. I will try to make videos on that too

[@virendrapatel775]

Here i miss rxjs 😀

[@unyieldingjarnail]

Take care of your health 🙏 bro

[@dchandanareddy2316]

Enjoyed guruji🙏🙌

[@yogeshvishnole1264]

Great sir

[@pinakadhara7650]

Amazing! Thank you

[@jschap]

just use debounce.

[@upsideInvestments2024]

Good to see you Sir are you coming live today??

[@HiteshCodeLab]

Yeep, let’s do live today

[@upsideInvestments2024]

@@HiteshCodeLab Thank you❤️

[@prnk139]

Good!!

[@sushantraut4372]

Sir thanks ❤️ but sir please make this videos in hindi it's help me to better understand sir request you to make new Hindi youtube channel please 🥺

[@pavanbhargav332]

🤩🤩

[@sudharshansh9004]

Wonderful job sir👏👏

[@sivasai6890]

❤

[@yprince02]

I'm first

[@blank001]

I personally use keyDebounce i.e a custom function which sends request to backend only when the user pauses to type for approx of 300-400ms. In this way not only the network conjunction is reduced but also reduces the number of requests to backed. (sending a request and cancelling it is more complex than just not sending it)

[@vijaynavale3919]

Yes I too use denounce if there is not any submit button

[@ashishchopra5370]

Sir My friends Birthday is comming I want to surprise him by giving your course as a gift to him How can I do it sir

[@piyushmahapatra5402]

No idea man,that's a tough question.

[@CREATIVEEXPERTZ]

@@piyushmahapatra5402 sir can introduce a feature by which we can buy a course and it will generate a Code and his friend can apply that code on that course

[@sandeepanumalla7785]

You can use useEffect hook which will react whenever the search Term changes and you can give 1 sec time using setTimeout to allow to the user to type. if the user types next word within 1 sec then we have to return cleartimeout of the previous one and set again and if the user stops for a second or more then that means user has typed the word and you have to fetch the data then. This is optimized approach I believe.

[@aryangurung1557]

I use this approach too

[@kushagrakumar3065]

What if we store all the data which came from the server in first request into an array and then if user enters the second word the data should be searched from that array instead of going again to the server.

[@dineshwinchester9599]

You'd be storing some details which the user would never end up wanting. So not really optimal.

[@subhankerchourasia]

Imagine having millions of records, however your way isn't totally wrong depends purely on usecase such as: Doing this on amazon where you have millions of products - terrible idea Doing on a webpage of an instructor such as hitesh and searching among hundreds of his courses - yes.

[@soumyajitdey5720]

From the beginning when you explained the situation I thought you were going to use debouncing. Learned something new today, keep it up! Going to use this in my next application 👍🏻❤️

[@manishmohanani654]

I think we can also use denouncing functionality to follow same approach, it would make code much more cleaner and easy to understand.

[@abijithgs3132]

Netflix style intro🔥, If the font had some other colours too it would have been more cooler

[@dineshwinchester9599]

How about using a debounced function which triggers the API call?

[@HiteshCodeLab]

Of course, that’s another great solution

[@dineshwinchester9599]

Hey Hitesh, Which one among these would you consider the most optimal?

[@yadneshkhode3091]

@@dineshwinchester9599use both

[@Mohith7548]

Familier with question? watch from 12:00

[@crazyshala4571]

I prefer to use debounce in that kind of scenario

[@poenaeco]

16:40 the problem is everyone creating content for newbies. I know most of the viewers are beginners but I think you should produce more advanced topics. Thanks btw.

[@andyfer7716]

How does the canceltoken get sent to the server? Is it added to the querystring in the URL , cookie variables or some HTTP header?

[@yadneshkhode3091]

how to apply for job at your startup edit: I am a fresher and i already knew about this solution, along with this we can also use debouncing

[@subhankerchourasia]

I usually defer on usecase like this with timeout and cancelling previous timer, axios cancelToken is new to me thanks for the intro.. However I fell just cancelling a request from front end might still cause unnecessary load to server, since by the time we cancel this request the request might have already reached server and server is already in the process of querying data ...

[@sandeepanumalla7785]

you are right. I believe setTimeout with useEffect is better approach.

[@harshavardhanteja6727]

Thought no video will be released, since March is for Health ryt!

[@HiteshCodeLab]

True but I am all fit now and ready to make videos 😁

[@harshavardhanteja6727]

@@HiteshCodeLab Happy to hear this Sir 😁

[@mishrarahul]

By this way request are only cacelled from browser. It will still get processed by server. So no network load reduction on server side. Only an illusion on browser. for this use case we can use debouncing.

[@yashkalavadiya5021]

This Intro looks like Netflix intro.

[@VishambarPandey]

cancelToken deprecated

[@tesla1772]

I didn't understand how it is going to reduce load on server. Coz server has already received request and will be processing it. Its the frontend who doesn't want results right?

[@vaibhavbakal]

No it's async request.. while processing first request if user makes another one then canceltToken avoids it to send second request on to server until gets the result of first🔥

[@karthikyadav111]

@@vaibhavbakal It cancels second request?? or the first request??

[@devanshsinghparmar]

Take care sir, Content is really Helpfull, Thanks a lot sir :)

[@johnyepthomi892]

There’s very few youtubers I know that caters to intermediate or advanced level and that’s a bit disappointing. Even if there are they’d be less favoured because of the volume of beginners vs intermediate or advanced , so most youtubers target beginners and they have more views ranking them higher. But given the saturation these beginners , well some average of those beginners will one day become intermediate, and given the saturation of content on youtube, intermediate or advanced level teaching youtubers can start to get more views. So, there’s a market.

[@eramilan586]

Why you haven't used onChange={(e)=>onType} as I understand if you don't use callback it will call Every rerender Correct me if I am wrong ..and reply me if you are agree with me Hitesh

[@officework2163]

can we use the cancel token with the barrier token or not ??? or with the header in axios

[@hammad-ilyas]

We can also debounce the request for further optimization.

[@fayequehannan2473]

Debounce technique can also come to rescue the scenario..

[@iam_muni_baa]

Your thumbnail are pretty good and also content

[@venkateshp9630]

I have exactly followed your code style in react native, but it is not working.

[@anjannarla7846]

good use case is a package for flutter which can handle the scenario

[@JainNamit]

What about debounce or throttling

[@me_manish_prajapati]

What do think about denounce? ( lodash ) That would be better solution or not?

[@curios_bot]

so which one is better, cancetoken or debouncing?

[@sandipsaha4469]

Looks like you lost a lot of fat.... Looking good

[@PreetNagda]

How about denounced requests?

[@shrivatsabhat]

Please add the time stamp to video that is more helpful

[@satyamkumar5]

Why you don't use debouncing here.

[@shreyashdhane6234]

what if we type bit slow, can we set min/max time between two letter in search?

[@piyushvaidya5086]

Hail the algorithm Gods!

[@rajesh-royal]

It will be easy with denounce

[@dhirajinchalkaranji9901]

This Thumbnail is DOPE⚡

[@reactsolutions9608]

wants hooks topic plzz

[@amanali9501]

We can also use debounce

[@annedeepa]

Is your fav color purple?

[@shubhammehra1563]

Thanks you sor🤓🤓

[@DineshKumar-kc6oj]

Super work 👌

[@RajveerSingh-yb6zq]

starts at 2:31