𝗦𝘁𝗼𝗽 𝗨𝗜 𝗙𝗿𝗲𝗲𝘇𝗲𝘀: 𝗠𝗮𝘀𝘁𝗲𝗿 𝗥𝗲𝗮𝗰𝘁 𝘂𝘀𝗲𝗗𝗲𝗳𝗲𝗿𝗿𝗲𝗱𝗩𝗮𝗹𝘂𝗲 ⚡

𝗦𝘁𝗼𝗽 𝗨𝗜 𝗙𝗿𝗲𝗲𝘇𝗲𝘀: 𝗠𝗮𝘀𝘁𝗲𝗿 𝗥𝗲𝗮𝗰𝘁 𝘂𝘀𝗲𝗗𝗲𝗳𝗲𝗿𝗿𝗲𝗱𝗩𝗮𝗹𝘂𝗲 ⚡

Your dashboard has a list of 10,000 items. You add a search bar. You link the input to a state hook.

This kills performance.

Every key press triggers a re-render. React updates the input. Then it filters the huge list. JavaScript is single-threaded. The list blocks the UI. Your screen freezes.

React 18 solves this with useDeferredValue.

This hook lets you set priorities. Your input gets high priority. It updates instantly. The list gets low priority. React updates the list when the main thread is free.

Follow these steps to fix your search:

• Create a state for your search query.
• Create a deferred value using useDeferredValue.
• Filter your list based on the deferred value.
• Wrap the filter in useMemo.

You no longer need Lodash or other debounce libraries. Your input stays smooth. Your users stay happy.

Source: https://dev.to/iprajapatiparesh/stop-ui-freezes-master-react-usedeferredvalue-3jih