React Basics - Custom Hooks


React Basics: Custom Hooks

App.js: Distinguish UI from Processing Code

App.js file with the following:
  • Import the useForm.js file (see below)
  • Passing generically named getter/setter values (we're using "values" and "handleChange" instead of something like "myvalue" and "setMyvalue") representing JS objects instead of specifically named elements
  • Reference the specific values in object notation where needed ( and values.password)
import './App.css';
import React, {useState} from 'react';
import { useForm } from './useForm';

function App() {

  const [values, handleChange] = useForm({email: '', password: ''});

  return (
    <div className="App">
      <header className="App-header">
        Email: <input name='email' value={} onChange={handleChange} /><br/><br/>
        Password: <input name='password' type='password' value={values.password} onChange={handleChange} /><br/><br/>

export default App;

useForm.js - Custom Hook

  • Set state values generically
  • Use the spread operator to use existing values in state....
  • ... then generically set the name/value pair of the submitted form values []:
import React, {useState} from 'react';

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

    return [
        e => {

export default useForm;

Link your website to this page! Copy and paste the URL below: