debounce watch

[RebeccaStevens]

Is it possible to debounce the re-render caused by watch?
(This is probably isn't specific to this lib and is just about debouncing re-renders in general).

I made a sandbox that shows a react element wrapping the input where the element needs to re-render with every change. It would be nice if I could debounce re-rendering of it though.
https://codesandbox.io/s/broken-snowflake-k98fz?file=/src/Textbox.tsx

[bluebill1049]

Not possible. Cheers Bill On 5 Oct 2020, at 11:44 am, Rebecca Stevens <[email protected]<mailto:[email protected]>> wrote: Is it possible to debounce the re-render caused by watch? (This is probably isn't specific to this lib and is just about debouncing re-renders in general). I made a sandbox that shows a react element wrapping the input where the element needs to re-render with every change. It would be nice if I could debounce re-rendering of it though. https://codesandbox.io/s/broken-snowflake-k98fz?file=/src/Textbox.tsx — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#3078>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACQGXVDBV5HV3KXKDGKPY4DSJEJHJANCNFSM4SEBTG3Q>.

[aylabbs]

Hi, all.

I know this is a stale issue, but I recently was looking for a way to debounce the watched value of a field and there seemed to not be much literature about this.

My use case was a search input where some network requests would be made after searching. I wanted to debounce this without A: debouncing the actual form input value (so the typing feels normal) or B: debouncing the network call. Perhaps either of these options or some other might present an alternative path. But it seemed to me that there is in fact a way to debounce rerenders. Since this is the first question I came across asking how, I'll respond to the OP although this question is no doubt stale by now.

Using a child component that renders nothing we can pass a setState function down from the component from which we wish to track the debounced value. In this manner, only the child component must rerender on each change. Since the child exists for the sole purpose of tracking these changes and renders nothing, we don't take much of a performance hit and it does not cause the parent to rerender unless necessary. Let me know if this helped in any way or if there is some pitfall to doing it this way.

Here is a fork of the OP's sandbox with a POC.

Cheers

[aylabbs]

@bluebill1049 thanks for the response.

As I explained in my reply above, I want the form input to register the change immediately so the user's experience typing doesn't "stutter". But I want to watch for a (debounced) value of the form and do something with that value after the "debouncing" time period. Because the value is being passed to other components which will then "react" to its changes, there is no other way I could imagine that that the input field could remain in sync with the current typed string and at the same time track a debounced version of the same using useWatch which will trigger a rerender immediately. I think my solution does that. Makes sense?

Edit: Unless you meant track the debounced value in a separate state and keep it updated onChange of the input. Introducing state to solve this problem at the input level brings with it many of the issues a form library sets out to solve. I would have to pass this state around etc. My solution allows you to debounce the watched value which is what I wanted (and the OP as well, best I could make out) instead of debouncing manually and tracking outside the form.

[Moshyfawn]

@aylabbs, if you are using an uncontrolled input, debouncing onChange wouldn't matter for the user, as the source of truth for the input is the element's value. The value in the RHF field values state would get updated after the debounce period, on the other hand.

See this example

[aylabbs]

@Moshyfawn thanks. But the OP included a sandbox where he is using <Controller /> which is the only way to register external controlled component such as React-Select, AntD and Material-UI.

Edit: I am as well.

[cloudorbush]

I'm using react-hook-form in react native and would like to know too if debouncing is possible with <Controller/>

[aylabbs]

My solution above (if you want to go that route) should work no problem. You can copy my Debouncer file from the codesandbox above. If you get stuck, post a snack of what you are trying to do

[dextermb]

FYI here's my adaptation of @aylabbs's example:

import { Fragment, ReactElement, useEffect } from 'react'
import { Control, useWatch } from 'react-hook-form'

interface IProps {
  value: any
  set: (n: any) => void
  control: Control
  name: string
  duration?: number
}

export default function Debounce ({ value, set, control, name, duration }: IProps): ReactElement {
  const internal = useWatch({ control, name })

  useEffect(() => {
    const timeout = setTimeout(() => {
      if (value !== internal) {
        set(internal)
      }
    }, duration ?? 500)

    return () => {
      clearTimeout(timeout)
    }
  }, [value, set, internal, duration])

  return <Fragment />
}

It's definitely not perfect, it'd be great to have native support for this, but hopefully this'll help others searching.

[Sorcer23]

it works for me:

const { watch } = useForm();

useEffect(() => {
    const debouncedCb = debounce((formValue) => console.log(formValue), 1000);

    const subscription = watch(debouncedCb);

    return () => subscription.unsubscribe();
  }, [watch]);

[igoroalonge]

I was getting random updates (probably my values were getting updated from one of my API calls and it's calling the effect), so I've just added a check like:

const subscription = form.watch((data, state) => {
    if (state.type !== "change") return
    ...
})

[adamward459]

Mine

function useDebouncedValue<TValue>(value: TValue, delay: number) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}
 // 
  const videoId = useWatch({ name: "youtubeUrl", compute: parseVideoIdFromYoutubeUrl });
  const debouncedVideoId = useDebouncedValue(videoId, 300);