Tired of Bloated Forms? My 2025 React Engine in 7 Days

// hooks/useFormState.js
import { useState } from 'react';

export const useFormState = (initialValues) => {
  const [values, setValues] = useState(initialValues);

  return [values, setValues];
};

This isn't doing much yet, but it gives us a clear starting point. We have a way to initialize and update our form's data.

Day 2: The Workhorse - A Generic `handleChange`

Writing a separate handler for every input is tedious and error-prone. We can create one function to handle all of them by leveraging the input's name attribute.

// Inside our hook, let's add handleChange

const handleChange = (e) => {
  const { name, value, type, checked } = e.target;
  
  setValues(prevValues => ({
    ...prevValues,
    [name]: type === 'checkbox' ? checked : value,
  }));
};

// Now our hook returns [values, handleChange]

This single function can now be attached to any input, textarea, or select element. It dynamically updates the correct piece of state based on the input's `name` and handles checkboxes correctly. Beautiful.

Day 3: Declarative Validation Logic

Validation can get messy. Instead of imperative `if/else` chains, let's use a declarative approach. We’ll define our validation rules as a simple object, where each key is a field name and the value is a function that returns an error message if invalid, or an empty string if valid.

// Example validation rules object
const validationRules = {
  email: (value) => {
    if (!value) return 'Email is required.';
    if (!/\S+@\S+\.\S+/.test(value)) return 'Email is not valid.';
    return '';
  },
  password: (value) => {
    if (!value) return 'Password is required.';
    if (value.length < 8) return 'Password must be at least 8 characters.';
    return '';
  },
};

This is clean, self-documenting, and easy to modify.

Day 4: Managing and Displaying Errors

Now we need a place to store the error messages generated by our rules. Let's add an `errors` state to our hook and a function to trigger validation.

// Inside our hook
const [errors, setErrors] = useState({});

const validate = (fieldsToValidate = values) => {
  let newErrors = {};
  for (const field in validationRules) {
    const error = validationRules[field](fieldsToValidate[field]);
    if (error) {
      newErrors[field] = error;
    }
  }
  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

// We can now show errors in our JSX
// <p>{errors.email}</p>

Day 5: The Gatekeeper - `handleSubmit`

We never want to submit a form with invalid data. Our `handleSubmit` function will act as a gatekeeper. It will run a full validation check first. If the form is valid, it proceeds with the submission logic provided by the component.

// Inside our hook, for the final user-facing callback
const handleSubmit = (e) => {
  e.preventDefault();
  if (validate()) {
    // If valid, call the onSubmit function passed to the hook
    console.log('Form is valid! Submitting...', values);
    // onSubmit(values);
  }
};

This ensures our submission callback only ever receives clean, validated data.

Day 6: Unification - The `useForm` Hook

It's time to bring everything together into our final, reusable engine: the useForm hook.

// hooks/useForm.js
import { useState } from 'react';

export const useForm = ({ initialValues, validationRules, onSubmit }) => {
  const [values, setValues] = useState(initialValues || {});
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setValues(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value }));
  };

  const validate = () => {
    let newErrors = {};
    for (const field in validationRules) {
      const error = validationRules[field](values[field]);
      if (error) newErrors[field] = error;
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      onSubmit(values);
    }
  };

  return {
    values,
    errors,
    handleChange,
    handleSubmit,
  };
};

Look at that! A complete, self-contained form engine in about 40 lines of code.

Day 7: The Payoff - A Real-World Example

Let's put our new hook to work with a simple registration form.

// components/RegistrationForm.js
import React from 'react';
import { useForm } from '../hooks/useForm';

const validationRules = { /* ... as defined on Day 3 ... */ };

const RegistrationForm = () => {
  const { values, errors, handleChange, handleSubmit } = useForm({
    initialValues: { email: '', password: '' },
    validationRules,
    onSubmit: (data) => alert('Submitted: ' + JSON.stringify(data)),
  });

  return (
    <form onSubmit={handleSubmit} noValidate>
      <div>
        <label>Email</label>
        <input
          type="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </div>
      <div>
        <label>Password</label>
        <input
          type="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {errors.password && <p style={{ color: 'red' }}>{errors.password}</p>}
      </div>
      <button type="submit">Register</button>
    </form>
  );
};

export default RegistrationForm;

The component logic is incredibly clean. All the messy state and validation logic is abstracted away into our hook, but we still have full control over the JSX and styling.

Why This "2025" Approach Matters

The "2025" in the title isn't about a futuristic new technology. It's about a modern development philosophy: moving away from heavy abstractions and back towards first principles. It’s about building what you need, understanding how it works, and keeping your applications lean and maintainable.

• Total Control: This is your engine. Need to add asynchronous validation? Debounce an input? Integrate with a different state manager? You can do it. The code is yours.
• Zero Dependencies: Your `node_modules` folder will thank you. This approach adds zero bytes to your vendor bundle.
• A Powerful Learning Tool: Building this hook forces you to understand the fundamental mechanics of form handling in React. This is an invaluable skill that will make you a better developer.

This 7-day project proves that you don't always need a massive library to solve common problems. Sometimes, a little bit of custom code goes a long way. So, next time you're about to `npm install` a form library, take a moment and ask yourself: could I build this myself? The answer might surprise you.