DEV Community: Ahmed Sarhan

The Trap of the useState hook with forms

Ahmed Sarhan — Tue, 20 Dec 2022 14:15:11 +0000

A brief about the Series

In this Series of React What’s and Whatnots, we will discuss in a series of articles some of the patterns and mistakes that a lot of React developers - including myself - fall victim to.

A brief about the Article

In this Article we will discuss a common mistake related to handling forms state.

Project Setub

I have already prepared a Github repo for you to follow along with,
So let’s start by opening a terminal where you feel comfortable and run the following commands:

git clone https://github.com/AhmedSarhanSwvl/react-form.git 
cd react-form
npm install
npm run start

Exploring our Application

Now we have our application up and running
As you can see, we have a simple five - six input form and a submit button.

If we go back to the App.js file in our code, you will see this inside the jsx;

    <form>
        <div className="form-group">
          <label htmlFor="username">Username</label>
          <input
            type="text"
            name="username"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div className="two-col_grid">
          <div className="form-group">
            <label htmlFor="email">Email</label>
            <input
              type="email"
              name="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div className="form-group">
            <label htmlFor="phone">Phone</label>
            <input
              type="tel"
              name="phone"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
          </div>
        </div>
        <div className="two-col_grid">
          <div className="form-group">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              name="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>
          <div className="form-group">
            <label htmlFor="confirmPassword">Confirm Password</label>
            <input
              type="password"
              name="confirmPassword"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
            />
          </div>
        </div>
        <div className="two-col_grid">
          <div className="form-group">
            <label htmlFor="city">City</label>
            <input
              type="text"
              name="city"
              value={city}
              onChange={(e) => setCity(e.target.value)}
            />
          </div>
          <div className="form-group">
            <label htmlFor="zipCode">Zip Code</label>
            <input
              type="text"
              name="zipCode"
              value={zipCode}
              onChange={(e) => setZipCode(e.target.value)}
            />
          </div>
        </div>
        <button type="submit">Submit</button>
      </form>

A very regular form inputs, but the problem lies in how the state of those inputs is being controlled;
If you scroll up to the very beginning of our App function you will see those useState hooks;

 const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [city, setCity] = useState('');
  const [zipCode, setZipCode] = useState('');

And maybe for a small application or a small form that won’t be an issue but for a large piece of code this is not the best way to go, you will have tens of useState hooks in your file and this can get missy fast, it will be harder to read, harder to scale and harder to manage.
Generally speaking to sum the situation up:
if state updates independently - separate useState.
for state that updates together, or only one field at a time updates - a single useState object
for state where user interactions update different parts of the state - useReducer
so for our case, we would go with useReducer

UseReducer to the Rescue
React does offer another - yet somewhat similar to useState - hook, called useReducer

You can use it in your form as follows:

function App() {
  const [formValues, setFormValues] = useReducer(
    reducerFunction,
    initialValues
  );
  ...
}

The useReducer hook like useState gives back two things; the state and the dispatcher and takes two arguments; the reducer function and the initial values of the reducer.
So we will now add the initial values ; an object with the very initial values of our form state, and since both initialValues and reducerFunction are neither changing state nor dependent of any React Hooks, I’m going to create them outside the App component for better performance as follows:

const initialValues = {
  name: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: '',
  city: '',
  zipCode: '',
};
const reducerFunction = (prevState, newState) => {
  return { ...prevState, ...newState };
};

function App() {
const [formValues, setFormValues] = useReducer(
    reducerFunction,
    initialValues
  );
...
}

Now what happens here, is that our reducerFunction takes two arguments the prevState which is the previous state before the new change or what can be called the current state stored in the useReducer hook and the newState which is the new piece of state sent through setFormValues dispatcher coming from the useReducer hook in the change handler function as follow:

 const onChangeHandler = (event) => {
    const { name, value } = event.target;
    setFormValues({ [name]: value });
  };

This function is going to be passed to ever input as a value to the onChange prop like this:

<input type="email" name="email" value={email} onChange={onChangeHandler} />

Now this function takes the native event as argument and within the function we distructure the event to get the name and value of that input on every change.

We then dispatch the setFormValues function from the useReducer hook which in turn fires the reducerFunction to update the state

So to explain this briefly; for the email input when the value changes the onChangeHandler function fires taking the event as argument
When we distructure the event.target we get name and value which are ‘email’ and the new value of that email input
We then fire setFormValues({ [name]: value }) which translates to setFormValues({ email: emailValue })
Then in the reducer function which fires on that action dispatch
It receives to arguments the prevState and the newState
The prevState is state object of the whole form and the newState is what was passed to setFormValues i.e.

prevState = {
    name,
    ...restOfState,
    email: oldEmailValue
  }

And

newState = {
    email: newEmailValue
  }

In the prevState, name, ...restOfstate here refers to any state you have in the reducer other than the part relevant to us on this step "email"
And thanks to the destructuring ability of ES6, the new email value overrides the old email value and the state is updated

So we are left with one thing, how do we consume the values for the value prop of our inputs and the form submit function?

  const { name, email, phone, password, confirmPassword, city, zipCode, } = formValues;

We will be destructuring the first value of the useReducer hook which is the formValues

So there you have it, how to replace multiple useState with one useReducer 😄🚀

Also please note that if your application does use multiple forms or face complex scenarios with the form validations and the state management of the forms, you can instead of useReducer, use some of the community packages that are more suited for such scenarios e.g. React-hook-form and Formik

Please let me know if you found this article useful and if you have any questions, leave them in the comments and I would be very happy to answer them.

The full code which you can also find on the same repo in final branch, will look like this

import { useReducer } from 'react';
import './App.css';

const initialValues = {
  name: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: '',
  city: '',
  zipCode: '',
};
const reducerFunction = (prevState, newState) => {
  return { ...prevState, ...newState };
};
function App() {
  const [formValues, setFormValues] = useReducer(
    reducerFunction,
    initialValues
  );

  const onChangeHandler = (event) => {
    const { name, value } = event.target;
    setFormValues({ [name]: value });
  };

  const {
    name,
    email,
    phone,
    password,
    confirmPassword,
    city,
    zipCode,
  } = formValues;
  const submitForm = (e) => {
    e.preventDefault();

    const data = {
      name,
      email,
      phone,
      password,
      confirmPassword,
      city,
      zipCode,
    };
    console.log('data', data);
  };

  return (
    <div className="App" onSubmit={submitForm}>
      <form>
        <div className="form-group">
          <label htmlFor="name">Username</label>
          <input
            type="text"
            name="name"
            value={name}
            onChange={onChangeHandler}
          />
        </div>
        <div className="two-col_grid">
          <div className="form-group">
            <label htmlFor="email">Email</label>
            <input
              type="email"
              name="email"
              value={email}
              onChange={onChangeHandler}
            />
          </div>
          <div className="form-group">
            <label htmlFor="phone">Phone</label>
            <input
              type="tel"
              name="phone"
              value={phone}
              onChange={onChangeHandler}
            />
          </div>
        </div>
        <div className="two-col_grid">
          <div className="form-group">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              name="password"
              value={password}
              onChange={onChangeHandler}
            />
          </div>
          <div className="form-group">
            <label htmlFor="confirmPassword">Confirm Password</label>
            <input
              type="password"
              name="confirmPassword"
              value={confirmPassword}
              onChange={onChangeHandler}
            />
          </div>
        </div>
        <div className="two-col_grid">
          <div className="form-group">
            <label htmlFor="city">City</label>
            <input
              type="text"
              name="city"
              value={city}
              onChange={onChangeHandler}
            />
          </div>
          <div className="form-group">
            <label htmlFor="zipCode">Zip Code</label>
            <input
              type="text"
              name="zipCode"
              value={zipCode}
              onChange={onChangeHandler}
            />
          </div>
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}
export default App;

Create your Live Real Time Clock and Date in "React.js", no 3rd Party Hassle

Ahmed Sarhan — Sat, 05 Jun 2021 16:30:48 +0000

Have you worked on a project and you wanted to display the date and time live maybe in your navbar or something?

Seems like a long shot? you will be surprised to know it is not,
If you are creating a system for a company - a bank in my case, a school or a hospital, you will find yourself in need of that little trick

But who needs a clock, there's one in every Pc and mobile phone right? well sometimes websites like to fancy themselves right

So let's just get into it

We will start by cloning the small demo I have already created for you

In your terminal make sure you are in the right directory and run those following lines

First Step: Clone the repo in your directory

git clone https://github.com/AhmedSarhan/live-watch.git

Now you should have a basic CRA with some additional styles and icons as follow:

The code should look like this



import './App.css';

import { ReactComponent as ClockIcon } from './icons/clock.svg';
import { ReactComponent as CalenderIcon } from './icons/calendar.svg';

function App() {
    return (
        <div className="App">
            <CalenderIcon />
            <p>date</p>
            <ClockIcon />
            <p>time</p>
        </div>
    );
}

export default App;

As you can see a basic React app function component with just the two icons and the styles we need imported and applied

In this article we will change those two p tags with real time date and time using only Js and React Hooks

Second Step: move to the project directory

cd live-watch

Third Step: Install npm packages the repo in your directory

npm i

Fourth Step: Run the application

This step should open your localhost on port 3000 by default

Your website should look like this

Now let's get to work

First of all make sure to import React and both useState, useEffect hooks at the top of your app component with the following line of code:

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

Now we are set to do the magic

Create our app state

We are going to make a dateState using the useState hook as follow:
const [dateState, useDateState] = useState(new Date());

Now by default the dateState initial value will be right now date but it won't update unless the user reloads the page so we need to work with that ... But first let's show the date to the user

Displaying the Date and Time

As you can see all the user can see is 📆 Date 🕒 Clock

But won't it be better to show the user the real date and time;

So there are many ways to do this but since this is a small application I would like to do it all in one state hook



<div className="App">
            <CalenderIcon />
            <p>
                {' '}
                {dateState.toLocaleDateString('en-GB', {
                    day: 'numeric',
                    month: 'short',
                    year: 'numeric',
                })}
            </p>
            <ClockIcon />
            <p>
                {dateState.toLocaleString('en-US', {
                    hour: 'numeric',
                    minute: 'numeric',
                    hour12: true,
                })}
            </p>
        </div>

So this is how your app should look like right now
as you can see using toLocalString JavaScript method which is a standard built in object in JavaScript, we can change the date of this moment to view it in a variety of ways

As you can see in the first paragraph tag I am using toLocalString to view the date of today in the format D MMM YYYY which should show on the date of this article release 5 Jun 2021

In the second paragraph, I'm displaying the time of this moment in the format h:mm a using the 12 hour system

Of course there are variety of ways to display the same date and you can play around with toLocalString method more and find a bit more of them.

Now we have made it two thirds of the way, the user can see the time and date of right now, but I bit it's not exactly right now any more, I would bet it is a minute or two late from your devices watch unless your refresh the page.

This leads us to our final step

Making Our watch Real-Time

In this step we will use the second hook we imported at the beginning of this article; the useEffect hook;

We will make the magic happen with one simple line of code:



    useEffect(() => {
      setInterval(() => setDateState(new Date()), 30000);
    }, []);

Now in this useEffect, we update the date every 30000 milliseconds which means that the dateState useState hook will be updated every half a minute 30 seconds and our app will rerender the DOM accordingly

Now if you take a look at your app and wait for one minute to pass, you should see the clock updated smoothly just like your native device watch.
It might be a long wait, but it's worth it 😂🔥

Conclusion

Now your final app component code should look something like that



import React, { useState, useEffect } from 'react';
import './App.css';
import { ReactComponent as ClockIcon } from './icons/clock.svg';
import { ReactComponent as CalenderIcon } from './icons/calendar.svg';

function App() {
    const [dateState, setDateState] = useState(new Date());
    useEffect(() => {
           setInterval(() => setDateState(new Date()), 30000);
    }, []);
    return (
        <div className="App">
            <CalenderIcon />
            <p>
              {' '}
              {dateState.toLocaleDateString('en-GB', {
                 day: 'numeric',
                 month: 'short',
                 year: 'numeric',
              })}
            </p>
            <ClockIcon />
            <p>
             {dateState.toLocaleString('en-US', {
                hour: 'numeric',
                minute: 'numeric',
                hour12: true,
            })}
            </p>
        </div>
    );
}

export default App;

You can also compare your code to the final result of mine through the Final branch on the same GitHub repo

How to build your own Utility classes using plain Scss alone

Ahmed Sarhan — Fri, 14 May 2021 17:50:08 +0000

In this article, we will talk and code about using couple of the amazing Sass features to give us some utility classes for spacing, justify and align content and items in the slickest way I was able to think of using a fairly small amount of code

Now, the question might be why don't I just use TailwindCss or any other framework where I can just use pre-made utility classes, tbh personally I love Tailwind and might have a future article about it, but to answer the question, maybe you land a job and the company like to do everything pure sass no frameworks and believe me they do exist more than you imagine, receive a recruitment task with the same requirement "pure css or sass" or you just feel interested in trying new stuff

we will be using Scss and I will be leaving a link to a GitHub repo of the code at the end of the article

this article assumes you know how to set Scss to work on your project, it has different ways to it with React.js, vue.js or just static HTML so look into this according to your project

So enough talk let's jump into the code part of it

So there's how your folder structure should look like in regular static project:

Root
--> Index.html
--> CSS "left empty"
--> Scss
--> styles.scss

the CSS file should be left untouched as browsers don't understand sass, we transform scss to css through packages like node-sass
personally I installed sass globally and ran this command in the terminal in my project root folder
sass --watch scss/styles.scss css/styles.css
so to sum it up; our main work will be with syles.scss and index.html

this is how your index.html should look like at the start



<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css"
    <title>Scss Tutorial</title>
  </head>

  <body>
    <div>

    </div>
  </body>

</html>

As you can see pretty basic html file, and it's connected to the css file and not scss file and this because as we mentioned earlier browsers don't understand scss so we need to convert it to plain css

Now what we aim to accomplish is to make spacing utility classes for margin and padding e.g : <div class="my-3 ml-2 mx-2 my-auto

Spacing Utility Classes

now the idea of using scss in not to create each class on its own but rather create all the classes dynamically with one piece of code

Granted, it won't be a small piece of code but it will much smaller and faster than creating it using plain css

so this is how you will create it



$spaceAmounts: (1, 2, 3, 4, 5, 6, 7, 8, auto);

@each $space in $spaceAmounts {
  @if $space==auto {
    .m-#{$space} {
      margin: #{$space};
    }

    .mx-#{$space} {
      margin-left: #{$space};
      margin-right: #{$space};
    }

    .my-#{$space} {
      margin-top: #{$space};
      margin-bottom: #{$space};

    }

    .ml-#{$space} {
      margin-left: #{$space};
    }

    .mr-#{$space} {
      margin-right: #{$space};
    }

    .mb-#{$space} {
      margin-bottom: #{$space};
    }

    .mt-#{$space} {
      margin-top: #{$space};
    }
  }

  @else {
    .m-#{$space} {
      margin: #{$space}rem;
    }

    .mx-#{$space} {
      margin-left: #{$space}rem;
      margin-right: #{$space}rem;
    }

    .my-#{$space} {
      margin-top: #{$space}rem;
      margin-bottom: #{$space}rem;

    }

    .ml-#{$space} {
      margin-left: #{$space}rem;
    }

    .mr-#{$space} {
      margin-right: #{$space}rem;
    }

    .mb-#{$space} {
      margin-bottom: #{$space}rem;
    }

    .mt-#{$space} {
      margin-top: #{$space}rem;
    }

    .p-#{$space} {
      padding: #{$space}rem;
    }

    .px-#{$space} {
      padding-left: #{$space}rem;
      padding-right: #{$space}rem;
    }

    .py-#{$space} {
      padding-top: #{$space}rem;
      padding-bottom: #{$space}rem;

    }

    .pl-#{$space} {
      padding-left: #{$space}rem;
    }

    .pr-#{$space} {
      padding-right: #{$space}rem;
    }

    .pb-#{$space} {
      padding-bottom: #{$space}rem;
    }

    .pt-#{$space} {
      padding-top: #{$space}rem;
    }
  }
}

The idea is simple, you are going to make a variable list of the amounts of space you want to make classes of, then loop through these amounts and create your own classes, the tricky part is with margin-auto utility classes and for that we shall use the if statement of scss ... pretty slick I know

Align & Justify Utility Classes

now one more trick using the same concept

while working with css3 flex box and grid system, we use css properties like;
justify-content, align-items, justify-items a lot and using the same trick we are going to create our own utility classes for them using yet another piece of code



$alignments: ("center", "space-between", "space-around", "space-evenly", "flex-start", "flex-end");

@each $align in $alignments {
  .justify-#{$align} {
    justify-content: #{$align};
  }

  .items-#{$align} {
    align-items: #{$align};
  }

  .justify-items-#{$align} {
    justify-items: #{$align};
  }

  .content-#{$align} {
    align-content: #{$align};
  }
}

now the idea is the same as for spacing but the class names are going to be a bit different, e.g items-center class is equal to align-items: center css property

Display and Text-Align Utility Classes

similarly enough we are going to make our display and text-align utility classes

here's our code for them

Display classes



$displayProps: ("block", "inline-block", "inline", "flex", "grid", "inline-flex", "inline-grid", "table", "inline-table", "list-item", "none", "contents");

@each $disp in $displayProps {
  .d-#{$disp} {
    display: #{$disp};
  }
}

Text Align classes



$textAlignments: ("left", "right", "center", "revert");

@each $textAlign in $textAlignments {
  .text-#{$textAlign} {
    text-align: #{$textAlign};
  }
}

now hit save, make sure new classes are added in your css/styles.css and take a look at all the new utility classes we just created in few minutes using that few lines of code

No it is time to try our classes in the Html file
here's how the body of the html file should look like



 <body>
    <div class="d-flex justify-center items-center my-3 mx-auto">
      <div class="pt-2 pb-4 px-3">
        <h3 class="text-center">This plain Scss</h3>
      </div>
      <div class="pt-2 pb-4 px-3">
        <h3 class="text-right">It's amazing</h3>
      </div>
    </div>
    <div class="d-grid scss-grid">
      <div class="px-3 py-2">
        <ul>
          <li>List item</li>
          <li>another list item</li>
          <li>one more of those</li>
        </ul>
      </div>
      <div class="pt-2 pb-3 px-2">
        <h3 class="text-center">Pretty Dope stuff</h3>
        <p class="text-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi libero maxime adipisci quos,
          asperiores omnis?
        </p>
      </div>
    </div>
  </body>

as you can see I have used all the classes we have created to create the following image

pretty basic I'm very aware, but I'm sure you too are aware of the possibilities of all you can build with this
you can also realize I have a custom class called scss-grid in my second main div, this is a class I applied to this one css property in my main scss file



.scss-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

I will also encourage you to try on your own to solve the scss-grid issue with the same way we did with all those utility classes, maybe create some classes for box-shadow, font-size, font-weight, text and background colors and many more and share with me your thoughts

Thank you for joining me today

you can also reach me on twitter @SuperSarhan15

you can check the code from here: GitHubRepo
I also included the plain css files so you can read through them

React Hook Form - A fast, performant and easy way to manage your forms in your react.js apps

Ahmed Sarhan — Fri, 30 Apr 2021 15:30:15 +0000

In this article you will learn about React Hook Form package and how to easily manage your forms in your react.js app

Nearly in every web application there's some form where the user enters data ... whether it is a signup / login form or just a contact us form, a job application form or whatever type of user input your business might need.

Now as a Software Developer or specifically a Front End developer your objective while building those forms is to collect the data from the user, send them to an API or direct them according to the business logic, show the user some error messages according to a validation schema and hopefully doing this in the most performant way possible along the way

So the question is how do we usually do this with React with no third party libraries involved?

We can use our state and the two way binding like the example in the screen shot down below

Now there are two main issues with that approach:

The Performance
The Cleanliness of our code

The Performance:

Let's assume we have a form of 5 to 10 inputs which is the usual range, now with every character a user types, edits or deletes this onChange function will run and hence the DOM will Re-render
and to the best of my knowledge that's not a great performance now, is it?

The Cleanliness of our code:

Now maybe not too many people pay attention to this point, nevertheless when you code something, you always have to keep in mind that other people might need to read it, update it, edit it or learn form it and hence it should be readable and understandable to most people who have working experience in the field
That being said, if you have too many inputs with too many useState hooks and too many OnChange Functions, nearly almost the same number of hooks and some sort of if statement validations to validate those inputs and show the user your errors.

Now this is how your code will look like

Not pretty I assume

So what if I tell you, that you can validate all of your form inputs, connect them all to one hook and only re-render the DOM once when the user submits ? sounds like a solution to the miss right?
but what about the errors you say? Don't worry we will be showing them to the user on the fly, but still with very minimum effects on the rendering

So to the main topic of this article React Hook Form:

I have made a YouTube tutorial - my first to be honest - about React Hook Form and did my best to dive deep into most of the aspects and features it offers to you

In this tutorial I dive deep in how to connect your form to the React Hook Form useForm hook, different ways of handling the form validation and their effects on the performance of our application

I also dive into connecting the React Hook Form to a custom validation Schema using Yup and JOI so that you have a variety of options when it comes to validating and maybe writing a clean code

by default React Hook Form gives you what's called a resolver that allows you to validate your form using a custom validation library like Yup, Joi, Zod and much more and they have official support for plenty of them which makes your life a lot easier
I will be diving into all of this and more in this continuing mini series on Youtube

you can always check the official React Hook Form docs here

Watch The full Tutorial down below or on my Channel on YouTube Chanel