Rerender after value changes

[cjoecker]

Is there a way to trigger rerenders so that I can change the form fields based on the values of other fields?

I have an input that is changing its value using useControlField.
Based on that input value, I want to enable and disable another input. For that, I'm getting the value of the first input using getValues().get("input-name")
The problem is that when an input changes its value, the whole form is not being rendered. Therefore, the field I'm intending to disable is not being refreshed.

I have something like this:

export default function Demo() {
	const { getValues } = useFormContext();
	const disable = getValues().get("name") === "hello";

	return (
		<ValidatedForm validator={validator} method="post">
			<FormInput name="name" label="First Name" />
			<FormInput name="lastName" disable={disable} label="Last Name" />
			<SubmitButton />
		</ValidatedForm>
	);
}

type MyInputProps = {
	name: string;
	label: string;
	disabled?: boolean;
};

export const FormInput = ({ name, label, disabled }: MyInputProps) => {
	const [value, setValue] = useControlField<string>(name);
	return (
		<div>
			<label htmlFor={name}>{label}</label>
			<input
				disabled={disabled}
				onChange={(e) => setValue(e.target.value)}
				value={value}
			/>
		</div>
	);
};

[cjoecker]

After experimenting a bit, I realized that instead of const disable = getValues().get("name") === "hello";, I can do the following:

const [name] = useControlField<string>("name");
const disable = name === "hello";

This fill rerenders the form when the value changes 🥳
But I'm not sure if it is the right way of doing it.