View on GitHub

React Hook Form Plus

(RHF+)

Improve missing useController error on missing control prop

Purpose

Improve the error message when the control prop is missing in the useController hook by providing a more descriptive and actionable error message.

Benefits

API Changes

Property updates

No new properties are added. This enhancement only improves existing error handling behavior. No type changes are required. All existing types remain unchanged.

Description

The error message has been enhanced to provide clearer guidance when useController is used without a control prop. This improvement helps developers quickly understand what went wrong and how to fix it.

Behavior

When useController is called without a control prop, the improved error message provides specific guidance about the missing requirement and suggests common solutions for resolving the issue.

Examples

Incorrect Usage (Will throw improved error)

import { useController } from '@bombillazo/rhf-plus';

function MyInput() {
  // ❌ This will throw an improved error message
  const { field } = useController({
    name: 'firstName',
    // missing control prop!
  });

  return <input {...field} />;
}

Correct Usage

import { useForm, useController } from '@bombillazo/rhf-plus';

function MyForm() {
  const { control } = useForm();

  return (
    <form>
      <ControlledInput name="firstName" control={control} />
    </form>
  );
}

function ControlledInput({ name, control }) {
  // ✅ Correct: control prop is passed
  const { field } = useController({
    name,
    control,
  });

  return <input {...field} />;
}

Limitations

None. This change only affects error scenarios that were already failing.

Backward Compatibility

This change is fully backward compatible. It only improves the error message when an error condition already exists - it doesn’t change any successful execution paths.