DEV Community: Lingaraj H U

Simplifying Form Validation: React Hook Form vs Traditional Methods

Lingaraj H U — Tue, 30 Jul 2024 13:48:15 +0000

Form validation is a crucial aspect of web development, ensuring data integrity and enhancing user experience. In the React ecosystem, we've seen a significant evolution in how we handle forms and their validation.

In this blog, we'll compare two approaches: traditional form validation and the modern React Hook Form library.
By examining these methods side by side, we'll discover why React Hook Form has become a go-to solution for many developers.

Traditional Form Validation in React

Let's start by looking at a traditional approach to form validation in React:

import React, { useState } from "react";

const SimpleForm = () => {

  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    // ... other fields
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    const newErrors = {};

    // Validation logic
    if (!formData.firstName) newErrors.firstName = "First Name is Required";

    if (!formData.lastName) newErrors.lastName = "Last Name is Required";

    if (!formData.email.match(/^\S+@\S+$/i)) newErrors.email = "Invalid email address";

    if (!formData.password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)) newErrors.password = "Invalid password";

    // ... more validation rules

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    // Submit form data
    try {
      const response = await simulateApiCall(formData);
      console.log("Success: ", response);
    } catch (error) {
      console.error(error);
      setError({ root: error.message });
    } finally {
      setIsSubmitting(false)
    }

  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="firstName"
        value={formData.firstName}
        onChange={handleChange}
      />
      {errors.firstName && <p>{errors.firstName}</p>}

      <input
        name="lastName"
        value={formData.lastName}
        onChange={handleChange}
      />
      {errors.lastName && <p>{errors.lastName}</p>}      

      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      {errors.email && <p>{errors.email}</p>}


      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
      {errors.password && <p>{errors.password}</p>}

      {/* More form fields */}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
};

In this traditional approach

We manage form state and error state separately using the useState hook.
We manually handle changes to form fields and implement custom validation logic in the handleSubmit function.

While this works, it involves a lot of boilerplate code and can become cumbersome for larger forms.

Enter React Hook Form

Now, let's see how we can achieve the same result using React Hook Form:

Installation

npm install react-hook-form

import React from "react";

// useForm is the hook which is given by react-hook-form
import { useForm } from "react-hook-form";

const ReactHookForm = () => {

  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm();

  const onSubmit = (data) => {
    // Submit form data
    try {
      const response = await simulateApiCall(formData);
      console.log("Success: ", response);
    } catch (error) {
      console.error(error);
      setError({ root: error.message });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("firstName", { required: "First Name is required" 
        })}
      />

      {errors.firstName && <p>{errors.firstName.message}</p>}

      <input
        {...register("lastName", { required: "Last Name is required" 
        })}
      />

      {errors.lasttName && <p>{errors.lasttName.message}</p>}      

      <input
        {...register("email", {
          required: "Email is required",
          pattern: { value: /^\S+@\S+$/i, message: "Invalid email address" }
        })}
      />

      {errors.email && <p>{errors.email.message}</p>}

      <input
        {...register("password", { required: "First Name is required",
         pattern: { value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/, message: "Invalid password"}
        })}
      />

      {errors.firstName && <p>{errors.firstName.message}</p>}      

      {/* More form fields */}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>

    </form>
  );
};

The Simplicity of React Hook Form

Reduced Boilerplate: React Hook Form eliminates the need for manual state management. No more useState for form data and errors.
Declarative Validation: Instead of writing imperative validation logic, we declare our validation rules right in the register function. This makes the code more readable and maintainable.
Automatic Error Handling: React Hook Form automatically tracks errors and provides them through the errors object, eliminating the need for manual error state management.
Performance: By leveraging uncontrolled components, React Hook Form minimizes re-renders, leading to better performance, especially for large forms.
Easy Integration: The register function seamlessly integrates with your existing input elements, requiring minimal changes to your JSX.
Built-in Validation: Common validation rules like required, min, max, pattern are built-in, reducing the need for custom validation functions.
TypeScript Support: React Hook Form provides excellent TypeScript support out of the box, enhancing type safety in your forms.

To understand the how to handle react-hook-form in typescript with more input fileds

While traditional form handling in React gives you fine-grained control, it often leads to verbose code that can be hard to maintain.
React Hook Form simplifies this process significantly, providing a more declarative and efficient way to handle forms and their validation.

Thank you for reading... hope you learnt something new today :)

Understanding Enums in TypeScript.

Lingaraj H U — Fri, 26 Jul 2024 15:12:50 +0000

Have you ever found yourself juggling multiple values in your code, wishing there was a more organized way to manage them?
Imagine having a list of predefined options that are both human-readable and machine-understandable. This is where enums come to the rescue!!!

Enums, short for enumerations, are a powerful feature in TypeScript that allows you to define a set of named constants. They're particularly useful when you have a fixed set of values that a variable can take.

Let's dive into enums and see how they can make your code more readable and maintainable.

Here's a simple enum definition:

Basic enum

enum Direction {
  North,
  East,
  South,
  West
}

// Using the enum
let myDirection: Direction = Direction.North;
console.log(myDirection); // Output: 0

By default, enums are number-based, starting from 0. But you can customize this:

enum Direction {
  North = 1,
  East,  // 2
  South, // 3
  West   // 4
}

// if you initialize first variable by a particular value then
// the next variable will maintain the order of value 
// assigned to first variable 

enum Direction {
  North = 100,
  East,  // 101
  South, // 102
  West   // 103
}

String Enums

TypeScript also supports string enums, which are more descriptive

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let myFavoriteColor: Color = Color.Blue;
console.log(myFavoriteColor); // Output: "BLUE"

Heterogeneous Enums

You can mix string and numeric members, but it's generally not recommended:

enum Mixed {
  Number = 1,
  String = "String"
}

Reverse Mappings Numeric enums come with reverse mappings, allowing you to get the enum member name from its value:

enum Weekday {
  Monday,
  Tuesday,
  Wednesday
}

console.log(Weekday[0]); // Output: "Monday"

enum Direction {
  North = 100,
  East,  // 101
  South, // 102
  West   // 103
}

console.log(Direction[101]); // output: "East"

When to Use Enums?

Enums come in handy in several scenarios:

Representing a fixed set of options: Like days of the week, card suits, or HTTP status codes.
Improving code readability: Instead of using magic numbers or strings, enums provide meaningful names.
Type safety: TypeScript ensures you only use valid enum values, catching errors at compile-time.

Some common use cases for enums include:

Defining a set of error codes or status codes.
Representing a set of colors, sizes, or other categorical values.
Defining a set of roles or permissions in an application.

Here's a practical example:

Payment Status Enum

In a payment processing system, we need to handle different payment statuses, such as "Pending", "Success", "Failed", etc. We can define an enum to represent these statuses:

enum PaymentStatus {
  Pending = 'pending',
  Success = 'success',
  Failed = 'failed',
  Refunded = 'refunded'
}

// Using the Enum:
// Now, let's use this `enum` in a payment processing function:

function processPayment(status: PaymentStatus) {
  switch (status) {

    case PaymentStatus.Pending:
      // Handle pending payment
      break;

    case PaymentStatus.Success:
      // Handle successful payment
      break;

    case PaymentStatus.Failed:
      // Handle failed payment
      break;

    case PaymentStatus.Refunded:
      // Handle refunded payment
      break;

    default:
      throw new Error('Invalid payment status');

  }
}

Enums in TypeScript offer a clean way to define a set of named constants. They enhance code readability, provide type safety, and are especially useful when working with fixed sets of values.
As you progress in your TypeScript journey, you'll find enums to be a valuable tool in your programming toolkit.

Thank you for reading... Hope you learnt something new today :)

My Journey with Classes and Objects in TypeScript: Lessons Learned!!!

Lingaraj H U — Thu, 25 Jul 2024 13:19:03 +0000

When I first started with TypeScript, classes and objects seemed daunting. But as I dug deeper, I discovered how powerful they can be. Let me share what I've learned along the way.

The Building Blocks: Basic Class Structure. I remember my first TypeScript class - it was a simple Car class:

class Car {
  make: string; // this is how you define the properties
  model: string;

  constructor(make: string, model: string) {
    this.make = make;
    this.model = model;
  }

  // A method to simulate driving the car
  drive() {
    console.log(`Cruising down the highway in my ${this.make} ${this.model}. What a ride!`);
  }
}

// Let's create new instance of the above class car.
const myDreamCar = new Car('Tesla', 'Model S');
myDreamCar.drive(); // Vrooom!

This basic structure became my go-to template for creating objects. It's amazing how much you can do with just properties and methods!

Keeping Secrets: Access Modifiers As my projects grew, I needed to protect certain data. That's when I discovered access modifiers:

class PiggyBank {
  private savings: number; // Our secret stash!

  constructor(initialAmount: number) {
    this.savings = initialAmount;
  }

  // Public method to add money
  public deposit(amount: number) {
    this.savings += amount;
    console.log(`Cha-ching! Deposited ${amount}. New balance: ${this.savings}`);
  }

  // Protected method for inheritance purposes the only way to access this 
  // protected method by implementing the child of this class.

  protected getBalance() {
    return this.savings;
  }
}

Using private and protected members felt like adding a security system to my code. No more accidental tampering!

The Family Tree: Inheritance Inheritance clicked for me when I thought about it in terms of a family tree:

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance}m. They're on the go!`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} says: Woof! Woof! Where's the mailman?`);
  }
}

// Let's create a furry friend!
const myPup = new Dog('Buddy');
myPup.bark();
myPup.move(10); // Buddy's on a mission!

It was like creating a family of classes, with each child inheriting traits from its parent. Pretty cool, right?

Making Promises: Interfaces and Classes Interfaces helped me set clear expectations for my classes:

interface Vechicle {
  start(): void;
  stop(): void;
}

// when a class implements the interface you must define 
// the methods which are declared in that interface.

class Car implements Vechicle {
  start() {
    console.log('Engine purrs to life. Ready for adventure!');
  }
  stop() {
    console.log('Parking brake on. Journey complete!');
  }
}

It's like making a promise: if a class implements an interface, it's guaranteed to have certain methods.

The Blueprint: Abstract Classes Abstract classes were a game-changer for creating flexible yet structured code:

// An abstract class is a blueprint for other classes.

// It can't be instantiated directly but can be inherited from.

abstract class Shape {

  // An abstract method doesn't have an implementation in the abstract class.

  // It must be implemented by any concrete (non-abstract) derived class.

  abstract getArea(): number; // abstract method

  // A concrete method in an abstract class has an implementation
  // and can be used by all derived classes.

  printArea() {
    console.log(`This shape covers ${this.getArea()} square units. Neat!`);
  }

}

// Circle is a concrete class that extends the abstract Shape class

class Circle extends Shape {

  // The 'private' keyword makes radius accessible only within this class

  constructor(private radius: number) {

    // 'super()' calls the constructor of the parent class (Shape)

    // It's required when extending a class, even if the parent class
    // doesn't have an explicit constructor

    super();

  }

  // This is the implementation of the abstract method from Shape

  getArea(): number {
    return Math.PI * this.radius ** 2;
  }

}

// We can create an instance of Circle, but not of Shape

const frisbee = new Circle(5);

// This calls printArea() from Shape, which in turn calls getArea() from Circle

frisbee.printArea();
// Outputs: This shape covers 78.53981633974483 square units. Neat!

Learning about classes and objects in TypeScript has been a journey. Each concept opened up new possibilities in my coding adventures. Whether you're building a simple app or a complex system, these tools can help you write cleaner, more organized code.

Hope you learnt something new....!!!!. thank you reading till the end :)

Mastering TypeScript Functions: Your Guide to Stronger, Safer Code

Lingaraj H U — Wed, 24 Jul 2024 17:14:56 +0000

TypeScript enhances JavaScript functions with powerful type-checking capabilities. Let's explore the key features that make TypeScript functions an essential tool for modern web development.

Basic Function Syntax: TypeScript allows you to specify parameter types and return types, making your function's intentions clear.

function greet(name: string): string {
  return `Hello, ${name}!`;
}

This function takes a string parameter and guarantees a string return value.

Arrow Functions: Arrow functions provide a concise syntax and lexical scoping of 'this'.

const multiply = (a: number, b: number): number => a * b;

Here, we define a function that takes two numbers and returns their product.

Optional and Default Parameters: TypeScript lets you define optional parameters and set default values.

function createUser(name: string, age?: number, role: string = 'user') {
  // Implementation
}

In this example, 'age' is optional, and 'role' has a default value of 'user'.

Rest Parameters: Rest parameters allow a function to accept an indefinite number of arguments as an array.

function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

This function can take any number of numeric arguments and return their sum.

Function Overloading: Function overloading allows you to define multiple function signatures for varied behavior.

function processInput(input: string): string;
function processInput(input: number): number;
function processInput(input: string | number): string | number {
  if (typeof input === 'string') {
    return input.toUpperCase();
  } else {
    return input * 2;
  }
}

This function can handle both string and number inputs, with different behavior for each.

Generic Functions: Generics allow you to create flexible, reusable functions that work with multiple types.

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

This generic function can work with arrays of any type and return the first element of that type.

TypeScript functions provide a robust foundation for building complex applications. By leveraging these features, you can write more expressive, safer, and self-documenting code.

Remember: The goal is not just to add types, but to use TypeScript's features to create more reliable and maintainable code structures.

I hope you learned something new in this short blog. :)

Types vs Interfaces in TypeScript: Which Should You Choose?

Lingaraj H U — Wed, 24 Jul 2024 11:15:14 +0000

Are you new to TypeScript and wondering about the difference between types and interfaces? Let's break it down with some cool examples!

🔹 Types: The Swiss Army Knife.

Types in TypeScript are super flexible. They're like the Swiss Army knife of type definitions.

// Define an object type for a superhero
type Superhero = {
  name: string;
  power: string;
  flyable?: boolean;  // Optional property
};

// Create a union type for a limited set of color options
type Color = "red" | "blue" | "green";

// Define a function type for mathematical operations
type MathFunction = (x: number, y: number) => number;

🔹 Interfaces: The Blueprint

Interfaces are like blueprints for objects. They're great for defining the structure of classes.

// Define an interface for a vehicle
interface Vehicle {
  brand: string;
  speed: number;
  accelerate(): void;  // Method signature
}

// Implement the Vehicle interface in a Car class
class Car implements Vehicle {
  brand: string;
  speed: number;

  constructor(brand: string) {
    this.brand = brand;
    this.speed = 0;
  }

  // Implement the accelerate method
  accelerate() {
    this.speed += 10;
  }
}

🔥 Key Differences:

Union Types: Only possible with 'type'

// Union type (only possible with 'type')
type Status = "pending" | "approved" | "rejected";

Extending: Both can extend, but interfaces are more natural for OOP

// Extending an interface
interface Animal {
  name: string;
}
interface Dog extends Animal {
  bark(): void;
}

// Extending a type
type Shape = {
  color: string;
}
type Circle = Shape & {
  radius: number;
}

Declaration Merging: Only interfaces can be reopened to add new properties.

// Declaration merging (only possible with interfaces)
interface Book {
  title: string;
}
interface Book {
  author: string;
}
// Now Book has both title and author properties

💡 Dev Tip: Use interfaces for objects and classes, and types for functions, unions, and complex types.

Remember, whether you use types or interfaces, TypeScript has got your back in catching errors before runtime!