getValues() always return a new object, is that intended behaviour?

[evanre]

Hey, the getValues doc says:
An optimized helper for reading form values. The difference between watch and getValues is that getValues will not trigger re-renders or subscribe to input changes.

Despite this, getValues returns a new object on every render, thus useEffect hook that depends on const formValues = getValues() is being triggered on every render. How can I solve this behavior?

Here's an example on codesandbox: https://codesandbox.io/s/react-hook-form-v7-getvalues-forked-ktq67y?file=/src/index.jsx

[leapful]

@evanre

Rely on a whole reference object as change dependency on useEffect hook is a bad approach for watching on change. If it's always a same reference object, what happens if only 1 field is changed inside the form object ? It will never trigger useEffect hook and it's just incorrect in term of logic.

I'm not sure what is the reason why you expect same reference object for getValues just to use it with useEffect hook but the correct way is to put directly target form field as change dependency, for example:

const formValues = getValues();

useEffect(() => {
   // do something with field A
}, [formValues.fieldA])

[evanre]

I have a complex form which consists of multiple components, each of which gets formValues object (getValues()) as a prop. I was trying to avoid unnecessary renders for child components if the form values haven't changed.

I've fixed it using a custom hook useMemoized which memoizes the object and returns original reference until its fields changed.

...
const {
    register,
    control,
    handleSubmit,
    getValues,
    reset,
    formState: { isValid, isDirty, errors },
    setValue,
    watch,
    trigger,
  } = useForm({
    defaultValues,
    mode: 'onChange',
  });

  const formValues = useMemoized(getValues());
...

return (
...
  <PersonalMapping
    register={register}
    control={control}
    errors={errors}
    formValues={formValues}
    useLDAP={useLDAP}
    onRefresh={handleRefreshLdap}
  />
...
)