Forms without libraries and thousands of use states

useForm.js

// By Ben Awad
import { useState } from "react";

export function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  
  return [
    values,
    (e) => {
      setValues({
        ...values,
        [e.target.name]: e.target.value
      });
    }
  ];
}

useFormExample.jsx

// Example
import React, { useState } from "react";
import { useForm } from "./useForm";

export default function App() {
  const [values, handleChange] = useForm({ email: "", password: "" });
  
  return (
    <div>
    
      <input name="email" value={values.email} onChange={handleChange} />
    
      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handleChange}
      />
          
    </div>
  );
}