How to track changes any fields?

[balex777]

How to track changes any fields? I try to do it in useEffect for this I set watch() in deps, but watch() changes not once, and useEfferct react for this. How to do it right?

[ritikbanger]

Use onChange method for this. It will track down the changes. You can add mode: onChange in your useForm or custom onChange method in your field.

Bonus: If you are doing this for validation, use Yup resolver.

[balex777]

I need this for send requets when I will change some select field. I don't want to add custom onChange method to all fields because in form so many fields. Can you please show some code how to do it with mode: onChange? Thanks

[ritikbanger]

Here is the code:

type FormInputs = {
  firstName: string;
  lastName: string;
};

const { register } = useForm<FormInputs>({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: {},
  resolver: undefined,
  context: undefined,
  criteriaMode: "firstError",
  shouldFocusError: true,
  shouldUnregister: false,
  delayError: undefined
})

mode: onChange | onBlur | onSubmit | onTouched | all = 'onSubmit'

onSubmit | Validation will trigger on the submit event and invalid inputs will attach onChange event listeners to re-validate them.
onBlur | Validation will trigger on the blur event.
onChange | Validation will trigger on the change event with each input, and lead to multiple re-renders. Warning: this often comes with a significant impact on performance.
onTouched| Validation will trigger on the first blur event. After that, it will trigger on every change event.Note: when using with Controller, make sure to wire up onBlur with the render prop.
all| Validation will trigger on the blur and change events.

[balex777]

Tanks this I know but I don't know how to use it with useEffect. It's need to me not for validation, I just need when change field to send request for get respons from backend

[ritikbanger]

Here is an example to do it: You can use a callback function to update the state and dispatch the data during an API hit using useEffect.

• This function sets the data in component state and stores in user reducer when user profile data is received from the database

  const updateReduxData = useCallback(
    (userData: any) => {
      if (!isEmpty(userData)) {
        const userInfo = {
          name: userData.name,
          email: userData.email,
        }
        dispatch(signUpAction({ ...userInfo, ...userData }))
        setUserInfo(userInfo)
      }
    },
    [dispatch]
  )

  useEffect(() => {
    async function getUserProfileInfo() {
      const res = await getUser()
      const userData = res.data?.data
      updateReduxData(userData)
    }
    getUserProfileInfo()
  }, [dispatch, updateReduxData])

[balex777]

thanks