Why I stopped using React's useState for form state management

I used to build every form with useState and controlled components. It felt natural -- React owns the state, everything stays in sync, and I have full control over every input change. Then I built a user profile form with 20 fields, validation rules, and conditional sections. Every keystroke triggered a re-render of the entire form component, the page felt sluggish, and my validation logic turned into a tangled mess of useEffect hooks.

The breaking point came when I had to add real-time field validation that checked username availability against an API. With controlled components, every character typed fired a new request. I added debouncing, then cancellation logic, then loading states for individual fields. What started as a simple form became 300 lines of state management code before I'd written any actual business logic.

That's when I discovered React Hook Form and learned the difference between controlled and uncontrolled components for forms. They solve different problems, and I'd been using the wrong tool for most of my forms.

The useState Form Problem

Here's what my old form code looked like:

function UserProfileForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    bio: '',
    website: '',
    // ... 16 more fields
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [touched, setTouched] = useState({});
 
  const handleInputChange = (field: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData(prev => ({ ...prev, [field]: e.target.value }));
    // Clear error when user starts typing
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: null }));
    }
  };
 
  const handleBlur = (field: string) => () => {
    setTouched(prev => ({ ...prev, [field]: true }));
    validateField(field, formData[field]);
  };
 
  const validateField = (field: string, value: string) => {
    // Validation logic for each field
    const fieldErrors = {};
    if (field === 'email' && !value.includes('@')) {
      fieldErrors[field] = 'Invalid email';
    }
    // ... more validation
    setErrors(prev => ({ ...prev, ...fieldErrors }));
  };
 
  // This component re-renders on every keystroke
  return (
    <form>
      <input
        value={formData.name}
        onChange={handleInputChange('name')}
        onBlur={handleBlur('name')}
      />
      {/* Repeat for 20 fields... */}
    </form>
  );
}

Every field update triggered a complete component re-render. The validation logic was scattered across multiple functions. Adding new fields meant updating the initial state, validation rules, and error handling. It was unmaintainable.

When React Hook Form Changed Everything

React Hook Form takes a fundamentally different approach. Instead of storing form state in React, it uses uncontrolled components and manages state internally with refs. Here's the same form:

import { useForm } from 'react-hook-form';
 
function UserProfileForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    watch,
  } = useForm({
    defaultValues: {
      name: '',
      email: '',
      bio: '',
      website: '',
      // ... 16 more fields
    },
  });
 
  const onSubmit = async (data) => {
    await updateProfile(data);
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('name', {
          required: 'Name is required',
          minLength: { value: 2, message: 'Too short' },
        })}
      />
      {errors.name && <span>{errors.name.message}</span>}
      
      <input
        {...register('email', {
          required: 'Email is required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid email',
          },
        })}
      />
      {errors.email && <span>{errors.email.message}</span>}
    </form>
  );
}

The component only re-renders when errors change or form is submitted. Validation rules are declared inline with the field registration. Adding new fields means adding one input with its validation rules -- no state management boilerplate.

When I Still Use useState for Forms

React Hook Form is not always the answer. I still use controlled components with useState for:

• Search inputs -- When I need to react to every keystroke for filtering or autocomplete
• Simple forms -- Single field forms like newsletter signup do not need the overhead
• Dynamic UI -- When form fields control the visibility of other components
• Real-time previews -- When changes need to update a preview pane immediately

Here's a search input where controlled components make sense:

function ProductSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
 
  useEffect(() => {
    if (query.length > 2) {
      searchProducts(query).then(setResults);
    }
  }, [query]);
 
  return (
    <>
      <input 
        value={query} 
        onChange={(e) => setQuery(e.target.value)} 
        placeholder="Search products..."
      />
      <ProductList products={results} />
    </>
  );
}

The Performance Difference

The performance difference is significant. With controlled components, a 20-field form re-renders the entire component tree on every keystroke. With React Hook Form, the component only re-renders when validation state changes.

I measured this in a real application:

• Controlled form: 47ms average render time per keystroke
• React Hook Form: 3ms average render time per keystroke
• Form submission: Both approaches are identical

For complex forms with conditional fields, nested objects, or field arrays, React Hook Form's performance advantage becomes even more pronounced.

My Current Approach

Here's my decision framework:

• Use React Hook Form for: Multi-field forms, user profiles, settings pages, checkout flows
• Use useState for: Search inputs, single-field forms, real-time previews, dynamic UI controls
• Consider Formik for: Legacy codebases where React Hook Form would require significant refactoring

The key insight is that forms are not always about React state. Sometimes the browser's native form state, managed through refs and uncontrolled components, is exactly what you need. React Hook Form gives you the best of both worlds -- React's component model with the performance of native form handling.

Stop fighting React's re-rendering behavior for forms. Embrace uncontrolled components and let React Hook Form handle the complexity of form state management.