Mastering React Hooks: From useState to Building a Production-Ready Custom Hook

When React introduced Hooks in version 16.8, it wasn't just a syntax update; it was a fundamental shift in how we share logic. Before Hooks, we relied on Higher-Order Components (HOCs) and Render Props to abstract behavior. It worked, but it resulted in "wrapper hell"—component trees so deep they looked like a staircase to nowhere.

As an engineer, I look at code through the lens of maintainability and composition. If I have to copy-paste the same handleChange logic into five different login forms, the system is broken.

In this deep dive, we aren't just going to look at the docs for useState. We are going to look at how to compose hooks. We will start with the primitives and end by building a production-grade useForm custom hook that you can drop into your micro-SaaS projects tomorrow.

The Primitive: State and Side Effects

To build complex systems, you must understand the atomic units. In React, those are useState and useEffect. Most tutorials cover syntax; let's talk about the mental model.

The Trap of useState

The most common mistake I see in code reviews is state fragmentation. Developers treat useState like individual variables rather than a cohesive state model.

// The Junior approach
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

// The Engineering approach
const [formData, setFormData] = useState({
  username: '',
  email: '',
  password: ''
});

Why does this matter? Batching and semantic grouping. When you update a form, you are usually updating a record, not an isolated string. Grouping state makes your intentions clear and simplifies the creation of dynamic handlers.

Side Effects with useEffect

If useState is the memory, useEffect is the reaction. It is the bridge between React's pure rendering cycle and the imperative world of APIs and DOM manipulation.

However, useEffect is often abused. If you are calculating derived state (e.g., filtering a list based on a search term), you do not need an effect. You just need a variable. Use useEffect strictly for synchronization with external systems.

The Problem: Repetitive Form Logic

Let's look at a standard login form component without custom hooks. It’s verbose and brittle.

const LoginForm = () => {
  const [values, setValues] = useState({ email: '', password: '' });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e) => {
    setValues({
      ...values,
      [e.target.name]: e.target.value
    });
  };

  const validate = () => {
    // ... 20 lines of validation logic
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const validationErrors = validate(values);
    setErrors(validationErrors);
    
    if (Object.keys(validationErrors).length === 0) {
      setIsSubmitting(true);
      await loginAPI(values);
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" onChange={handleChange} value={values.email} />
      {/* ... rest of jsx */}
    </form>
  );
};

The logic inside handleChange, handleSubmit, and the error state management has nothing to do with the UI of a login form. It is generic form behavior. If we build a "Contact Us" page next, we have to rewrite all of this.

This violates the DRY (Don't Repeat Yourself) principle. It's time to engineer a solution.

Building the Custom Hook: useForm

A custom hook is simply a JavaScript function that uses other hooks. By convention, it starts with "use". We are going to extract the state, the handling, and the validation into a reusable unit.

Step 1: The Skeleton

We need a hook that accepts an initial state and a validation strategy, and returns the current values, errors, and handlers.

import { useState, useEffect, useCallback } from 'react';

const useForm = (initialValues, validate) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Logic goes here...

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

Step 2: Generic Logic & Optimization

Here is where we apply the engineering mindset. We use useCallback to ensure our handlers don't regenerate on every render, which is crucial if we pass these handlers down to memoized child components (like custom UI inputs).

  const handleChange = useCallback((e) => {
    const { name, value } = e.target;
    setValues((prev) => ({ ...prev, [name]: value }));
  }, []);

Step 3: Handling Submission and Validation

This is the tricky part. We need to handle the submission, prevent default browser behavior, check for errors, and only execute the callback if the data is clean.

  const handleSubmit = useCallback((callback) => async (e) => {
    if (e) e.preventDefault();
    
    const validationErrors = validate(values);
    setErrors(validationErrors);
    setIsSubmitting(true);

    if (Object.keys(validationErrors).length === 0) {
      try {
        await callback();
      } catch (error) {
        // Handle API errors optionally
      } finally {
        setIsSubmitting(false);
      }
    } else {
      setIsSubmitting(false);
    }
  }, [values, validate]);

Step 4: The Reactive Effect

A nice UX touch is to clear errors as the user types, but only if an error already exists for that field. We can add a useEffect to monitor changes.

  useEffect(() => {
    if (Object.keys(errors).length > 0) {
      const newErrors = validate(values);
      // Only update if strictly necessary to avoid loops
      // (Simplified for this example)
      setErrors(newErrors);
    }
  }, [values]);

The Final Implementation

Here is the full, clean implementation of our custom hook. This is code you can actually use.

import { useState, useEffect, useCallback } from 'react';

export const useForm = (initialValues, validate) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = useCallback((e) => {
    const { name, value } = e.target;
    setValues((prev) => ({ ...prev, [name]: value }));
  }, []);

  const handleSubmit = useCallback((onSubmit) => (e) => {
    if (e) e.preventDefault();
    setErrors(validate(values));
    setIsSubmitting(true);
  }, [values, validate]);

  useEffect(() => {
    if (isSubmitting) {
      const noErrors = Object.keys(errors).length === 0;
      if (noErrors) {
        // In a real scenario, you'd pass the submit function in to be called here
        // reset submitting state after operation
        setIsSubmitting(false);
      } else {
        setIsSubmitting(false);
      }
    }
  }, [errors]);

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

Refactoring the Component

Now, let's look at that LoginForm again. It transforms from a mess of logic into a declarative view.

const LoginForm = () => {
  const { values, handleChange, handleSubmit, errors } = useForm(
    { email: '', password: '' },
    validationRules
  );

  const login = () => {
    console.log("Logging in with", values);
  };

  return (
    <form onSubmit={handleSubmit(login)}>
      <input 
        name="email" 
        value={values.email} 
        onChange={handleChange} 
      />
      {errors.email && <span>{errors.email}</span>}
      
      <input 
        name="password" 
        value={values.password} 
        onChange={handleChange} 
      />
      <button type="submit">Login</button>
    </form>
  );
};

Why This Matters for Automation Engineers

As builders, we aren't just writing code; we are building assets. This useForm hook is an asset. I can port this into an internal tool, a client dashboard, or a SaaS product without rewriting a single line of logic.

Mastering Hooks isn't about memorizing API methods. It is about identifying patterns in your workflow, extracting them, and automating your own coding process through abstraction.

Go build something modular.