Search in React using debouncing | useCallback

Подписаться 9 тыс.

Просмотров 28 тыс.

50% 1

Hey everyone! In this video we will be implementing search in react using debounce and useCallback hook. We will optimise our performance and we will also reduce the api cost with the help of this.
Please watch this video till the end and don't forget to subscribe.
Subscribe here -
/ devchannelbyakashingole
Link to other videos -
10 days of JavaScript -
• JavaScript Tutorial fo...
React Todo App -
• React todo app | React...
Deno Tutorial -
• Deno Tutorial Series
HackerRank Certification for React -
• HackerRank Certificati...
Vue Js | Vuex Tutorial -
• Vuex Tutorials 2020 | ...
#react #search #debounce #useCallback #javascript #akashingole

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@akashingole 3 года назад

Thank you for watching. -AI😊

@jitujahagirdar613 2 года назад

You made my day to easy understanding search with debounce in react. after searching lots of the video i got finally your video that me clear understanding..! Thanks for this video it really help me a lot..!

@prakarshshrivastava6422 Год назад

8:43 setTimeOut is not provided by javascript it is a browser api

@nikhilkumarjamwal5322 12 дней назад

when i try to run the code calling api from handleChange function i am getting CORS policy.

@gunjangirdhar6701 2 года назад

Big Thanks! It worked..😊

@amityadav85 2 года назад

good work dude!

@ТариэлТаиров 2 года назад

thank you bro

@chethanprabhu4475 2 года назад

useCallback hook is not required as it is not controlled input element

@RavindraSingh-zg9eq 8 месяцев назад

@akashingole i hope this code will work fine if there is any issue with this debouncing implementation pls let me know export default function App() { const [inp, setInp] = useState(""); let timer; function debounce(func, timer) { clearTimeout(timer); timer = setTimeout(() => { func(); }, 4000); } return ( { setInp(e.target.value); debounce(() => { console.log(e.target.value); }); }} name="name" value={inp} placeholder="serach..." /> ); }

@devadharsank 3 месяца назад

what the difference between passing prop as type={'text'} or type='text'

@tarunkmr145 3 месяца назад

Why can’t we call settimeout function and write handle change function in it ?

@tomasburian6550 Год назад

You are the code GOD! Finally found exactly what I was looking for :)

@akashingole Год назад

Glad I could help

@priyanshchoudhary3930 3 года назад

Isn't this throttling cause you limit your function call to once in every 500ms. ?

@anirbandas12 2 года назад

Why use useCallback() to memoise when the function is not being passed as props to any child component?

@mdmustaqahmed5391 2 года назад

Yes no need of useCallback() function here, Code will work fine without useCallback() hook

@RavindraSingh-zg9eq 8 месяцев назад

@aashiqahmed5273 3 года назад

How to make the api result as selectable options and get the value of the text?

@robeeeeen 2 года назад

Any idea? Looking for it still :((

@ankitmehrotra8519 3 года назад

Bro It's throttling effect. Very Nicely explained though, I tried using controlled components to achieve same but cud not. Using ref we can achieve this effect

@kulyog6626 Год назад

No buddy. This is trailing debouncing. There is also leading debouncing.

@adivmt 3 года назад

Hello Akash , can you explain why we used apply () on fn ?

@hasnainmalick8888 2 года назад

To borrow a function and invoked it directly.

@bhagabatsahoo3112 3 года назад

good. Can you provide the code please ? Thanks

@electrodragon1211 2 года назад

Big Thanks to you BRO !! It worked..

@aashiqahmed5273 3 года назад

Can i use this with redux action file?

@shivgaurav8567 2 года назад

Yes , you just need to dispatch your action where he calling api

@robeeeeen 2 года назад

How to add cache handler? ❣❣❣

@kikevanegazz325 Год назад

This is Freaking Great!

@kikevanegazz325 Год назад

I do have a question though, I am having an issue regarding event pooling. Somehow the event is not passing through to the handleChange function. What do "...args" make reference to?