search

amitmerchant1990 / amitmerchant-dot-com-comments

1 stars 0 forks source link

natural-debouncing-using-the-usedeferredvalue-hook-in-react-18/ #100

Open utterances-bot opened 1 year ago

utterances-bot commented 1 year ago

Natural debouncing using the useDeferredValue hook in React 18 — Amit Merchant — A blog on PHP, JavaScript, and more

Oftentimes, when working with UIs, you may come across scenarios where you need to render something based on the user-entered input.

https://www.amitmerchant.com/natural-debouncing-using-the-usedeferredvalue-hook-in-react-18/

sudo97 commented 1 year ago

In the second example when I type it doesn't immediately show what I typed in the input, the reason for that is because the thread is stuck, not because the hook is doing its job. In order for it to demonstrate the value of the hook the heavy component needs to be memoized

phatpcdev commented 11 months ago

As sudo97 mentioned, the input search always stuck(blocking UI) when we keystroke. To fix that issue, we should use the memo built-in function to memorize the ListUsers component. This way, the app will be smooth.

Read more: https://react.dev/reference/react/useDeferredValue#deferring-re-rendering-for-a-part-of-the-ui