setValue

This function allows you to dynamically set the value of a registered field and have the options to validate and update the form state. At the same time, it tries to avoid unnecessary rerender.

Props

setValue('name', 'value', { shouldValidate: true })

setValue('name', 'value', { shouldDirty: true })

setValue('name', 'value', { shouldTouch: true })

Rules

• Only the following conditions will trigger a re-render:

  • When an error is triggered or corrected by a value update

  • When setValue cause state update, such as dirty and touched.

• It's recommended to target the field's name rather than make the second argument a nested object.

  setValue('yourDetails.firstName', 'value'); // ✅ performant
  setValue('yourDetails', { firstName: 'value' }); // less performant
  
  register('nestedValue', { value: { test: 'data' } }); // register a nested value input
  setValue('nestedValue.test', 'updatedData'); // ❌ failed to find the relevant field
  setValue('nestedValue', { test: 'updatedData' } ); // ✅ setValue find input and update

• It's recommended to register the input's name before invoking setValue. To update the entire Field Array, make sure the useFieldArray hook is being executed first.

  Important: use replace from useFieldArray instead, update entire field array with setValue will be removed in the next major version.

  // you can update an entire Field Array,
  setValue('fieldArray', [{ test: '1' }, { test: '2' }]); // ✅
  
  // you can setValue to a unregistered input
  setValue('notRegisteredInput', 'value'); // ✅ prefer to be registered
  
  // the following will register a single input (without register invoked)
  setValue('resultSingleNestedField', { test: '1', test2: '2' }); // 🤔
  
  // with registered inputs, the setValue will update both inputs correctly.
  register('notRegisteredInput.test', '1')
  register('notRegisteredInput.test2', '2')
  setValue('notRegisteredInput', { test: '1', test2: '2' }); // ✅ sugar syntax to setValue twice

Examples

import { useForm } from "react-hook-form";

const App = () => {
  const { register, setValue } = useForm();
  
  return (
    <form>
      <input {...register("firstName")} />
      <button type="button" onClick={() => setValue("firstName", "Bill")}>
        setValue
      </button>
      <button
        type="button"
        onClick={() =>
          setValue("lastName", "firstName", {
            shouldValidate: true,
            shouldDirty: true
          })
        }
      >
        setValue options
      </button>
    </form>
  );
};

import * as React from "react";
import { useForm } from "react-hook-form";

type FormValues = {
  a: string;
  b: string;
  c: string;
};

export default function App() {
  const { watch, register, handleSubmit, setValue, formState } = useForm<
    FormValues
  >({
    defaultValues: {
      a: "",
      b: "",
      c: ""
    }
  });
  const onSubmit = (data: FormValues) => console.log(data);
  const [a, b] = watch(["a", "b"]);

  React.useEffect(() => {
    if (formState.touchedFields.a && formState.touchedFields.b && a && b) {
      setValue("c", `${a} ${b}`);
    }
  }, [setValue, a, b, formState]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("a")} placeholder="a" />
      <input {...register("b")} placeholder="b" />
      <input {...register("c")} placeholder="c" />
      <input type="submit" />

      <button
        type="button"
        onClick={() => {
          setValue("a", "what", { shouldTouch: true });
          setValue("b", "ever", { shouldTouch: true });
        }}
      >
        trigger value
      </button>
    </form>
  );
}

Video

The following video tutorial demonstrates setValue API in detail.