Add hook useDeferredValue

[itisnajim]

trying to write an equivalent for react useDeferredValue hook.

[rrousselGit]

Hello!

I'm not sure if that's really an equivalent to the React one. I've never used it, but reading the docs, it seems like this deprioritise the subsequent render, such that it doesn't block the UI thread. A simple setState after a timeout wouldn't do that.

[itisnajim]

Hello!

I'm not sure if that's really an equivalent to the React one. I've never used it, but reading the docs, it seems like this deprioritise the subsequent render, such that it doesn't block the UI thread. A simple setState after a timeout wouldn't do that.

yes it's not really equivalent to the react one, The background re-rendering process triggered by useDeferredValue happens as soon as React finishes the initial render, and the timeout can be set also, in react e.g:

const deferredCount = useDeferredValue(count, {
    timeoutMs: 1000,
  });

in the code i've pushed it resembles more of a debounce mechanism, Maybe by incorporating WidgetsBinding.instance.addPostFrameCallback we can ensure that the layout is completed.. still, I'm unsure about how to automatically manage and emit the timeout property in this context.

[rrousselGit]

As it is, wouldn't usePrevious be a good-enough replacement?

[itisnajim]

usePrevious can't control the timeout meaning it doesn't wait for a specific duration. defer the update of a value for a specified timeout this can be beneficial for optimizing the rendering performance by delaying non-critical updates. e.g: scenario where you have a search input component that triggers an API call for search suggestions. U can use useEffect with deferred.value as a dependency

useEffect(() {
  // Use deferredQuery for your API call
  fetchSuggestions(deferredQuery);

  // Cleanup function
  return () {};
}, [deferredQuery]);

[rrousselGit]

I'm still skeptical whether that's really equivalent.

At the moment, the current implementation is only equivalent to a debounce/throttle. Yet the documentation of useDeferredValue is pretty clear in that it's different from a simple debounce/throttle

[rrousselGit]

I would be more willing to add a simple "useDebounced" hook with an implementation similar to the current one.

This would avoid possible confusions in case someone familiar with the useDeferredValue hook tries to use flutter_hooks'