Search in React using debouncing | useCallback

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ธ.ค. 2024

ความคิดเห็น • 33

  • @akashingole
    @akashingole  3 ปีที่แล้ว +8

    Thank you for watching.
    -AI😊

  • @tomasburian6550
    @tomasburian6550 2 ปีที่แล้ว +4

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

  • @jitujahagirdar613
    @jitujahagirdar613 3 ปีที่แล้ว +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
    @prakarshshrivastava6422 ปีที่แล้ว +2

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

  • @kikevanegazz325
    @kikevanegazz325 ปีที่แล้ว

    This is Freaking Great!

    • @kikevanegazz325
      @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?

  • @electrodragon1211
    @electrodragon1211 2 ปีที่แล้ว

    Big Thanks to you BRO !!
    It worked..

  • @gunjangirdhar6701
    @gunjangirdhar6701 2 ปีที่แล้ว

    Big Thanks!
    It worked..😊

  • @amityadav85
    @amityadav85 2 ปีที่แล้ว

    good work dude!

  • @nikhilkumarjamwal5322
    @nikhilkumarjamwal5322 2 หลายเดือนก่อน

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

  • @anirbandas12
    @anirbandas12 2 ปีที่แล้ว +2

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

    • @mdmustaqahmed5391
      @mdmustaqahmed5391 2 ปีที่แล้ว

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

  • @priyanshchoudhary3930
    @priyanshchoudhary3930 3 ปีที่แล้ว +2

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

  • @adivmt
    @adivmt 3 ปีที่แล้ว +2

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

    • @hasnainmalick8888
      @hasnainmalick8888 2 ปีที่แล้ว +1

      To borrow a function and invoked it directly.

  • @aashiqahmed5273
    @aashiqahmed5273 3 ปีที่แล้ว +2

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

    • @robeeeeen
      @robeeeeen 2 ปีที่แล้ว

      Any idea? Looking for it still :((

  • @RavindraSingh-zg9eq
    @RavindraSingh-zg9eq 10 หลายเดือนก่อน

    function debounce(func, timer) {
    clearTimeout(timer);
    timer = setTimeout(() => {
    func();
    }, 4000);
    }
    onChange={(e) => {
    setInp(e.target.value);
    debounce(() => {
    console.log(e.target.value);
    });
    }} can't we use this ? i dont understand why returning another function by debounce ?

  • @devadharsank
    @devadharsank 5 หลายเดือนก่อน

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

  • @ТариэлТаиров
    @ТариэлТаиров 2 ปีที่แล้ว

    thank you bro

  • @robeeeeen
    @robeeeeen 2 ปีที่แล้ว

    How to add cache handler? ❣❣❣

  • @tarunkmr145
    @tarunkmr145 6 หลายเดือนก่อน

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

  • @ankitmehrotra8519
    @ankitmehrotra8519 3 ปีที่แล้ว +1

    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
      @kulyog6626 2 ปีที่แล้ว

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

  • @bhagabatsahoo3112
    @bhagabatsahoo3112 3 ปีที่แล้ว +1

    good. Can you provide the code please ? Thanks

  • @aashiqahmed5273
    @aashiqahmed5273 3 ปีที่แล้ว +1

    Can i use this with redux action file?

    • @shivgaurav8567
      @shivgaurav8567 3 ปีที่แล้ว

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

  • @chethanprabhu4475
    @chethanprabhu4475 2 ปีที่แล้ว

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

  • @RavindraSingh-zg9eq
    @RavindraSingh-zg9eq 10 หลายเดือนก่อน

    @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..."
    />

    );
    }

  • @aigaming019
    @aigaming019 2 ปีที่แล้ว

    Very nicely explained 👍