Friends who often write React code know that when some components requiring heavy computation are updated, it may block other inputs. For example, in a typical filter select options scenario, calculating the filtered items for each input can cause lag due to fast inputs. By using useDeferredValue for the filtering value, we can separate these two parts, actively reducing the priority of filtering to avoid lag caused by competition with inputs.
This is especially useful in scenarios involving a large amount of data or complex calculations. Its main function is to delay the update of a value until the main thread is idle, thus avoiding UI lag issues caused by a large number of frequent state updates.