RHF: why do fetched options cause default form value for <select /> to be false

[marcebdev]

Pretty much title, I suspect this is because RHF is using the ref to set the value instead of using the value prop. But what is standard practice if you have a default form value that is immediately accessible but the options are fetched async?

Something like:

const options = useQuery()

const { register } = useForm({ defaultValues: { item: '5' } })

return (
  <Select ...register('item') options={[{ label: 'Select an item', value: '' }, ...options]}>
)

What is the standard practice?

[omergungor11]

If your Select wraps a native <select>, a simple approach is to wait for the initial options before mounting the registered element. Keep useForm mounted, so its default value is already available:

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

type Option = { label: string; value: string };

// Pass the query's data here; undefined means it hasn't loaded yet.
function ItemForm({ options }: { options: Option[] | undefined }) {
  const { register, handleSubmit } = useForm({
    defaultValues: { item: '5' },
  });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      {options === undefined ? (
        <p>Loading options…</p>
      ) : (
        <label>
          Item
          <select {...register('item')}>
            <option value="">Select an item</option>
            {options.map(option => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </label>
      )}
      <button type="submit" disabled={options === undefined}>Submit</button>
    </form>
  );
}

This ensures the matching option exists when RHF registers the element. A native select cannot display '5' while it only contains the empty placeholder. React also distinguishes an initial default from a controlled current value: select documentation.

Handle query errors separately, and keep the loaded select mounted during background refetches; don't reset the field every time a new options array arrives. If the fetched list doesn't contain '5', you'll need an explicit missing-item policy rather than expecting that value to be displayed.

I verified this pattern with RHF 7.88.0 / React 19.2.4 in a React Testing Library + jsdom test under StrictMode: the delayed list selects and submits '5', and a later options update preserves a user's change to '6'.

If you mean the literal boolean false, that needs the Select implementation to diagnose: native single-select values are strings. For a controlled component such as React Select, use Controller and map the stored ID to the component's expected option value instead of assuming it has the native register interface.