DEV Community: Satyam Kumar

Zod Validation in [React + Typescript]

Satyam Kumar — Fri, 31 Jan 2025 20:58:03 +0000

Zod

Zod is a TypeScript-first schema declaration and validation library. It allows you to define validation schemas for data structures, such as objects, strings, numbers, arrays, etc. Zod validates the data according to the schema and provides clear error messages if the data doesn't match the expected structure.

Basically it helps us to define a schema for a data structure and then validate that data structure values against the schema and give us proper error.

Key Features of Zod:

Type-safe: Zod integrates seamlessly with TypeScript, ensuring that the types of data are validated correctly and that type inference works as expected.
Declarative Validation: You define a schema that describes the expected structure of the data, and Zod will automatically validate the data against that schema.
Error Handling: Zod provides detailed, easy-to-understand error messages when validation fails, making it simple to debug validation issues.
Composability: You can combine Zod schemas to create more complex data structures, making it easy to reuse and compose validation logic.
Asynchronous Validation: Zod supports asynchronous validation for scenarios such as checking if a value exists in a database.
Okay, Let's move to the coding part, best practice with zod validation library.
For me it is to create a custom hook and then use it everywhere according to my need, you can explore your best choice and let me know more in comments so I can learn new ways too.

Now move to the code, so here we are going to create a custom hook named useFormValidation which will return us an object containing three fields

errors: This will contains an objects with key of form data and error associated with as value.
validateField: It is a function which will validate a particular field of a form. It takes two params- first one is name of field which we want to validate and the other one is the value of that field.
validateForm: It is also a function which will validate the whole form in one go. It takes only one param that is form data in the object form.
Okay now its time to create our custom hook as we explained above. First we are going to install zod in our react + typescript project using command

npm install zod

After installing the zod we will create a file name form-validation.tsx and put this code there

import { z, ZodSchema, ZodObject } from "zod";
import { useState, useCallback } from "react";

// Define a generic type for the schema
type SchemaType<T> = ZodObject<{ [K in keyof T]: ZodSchema<T[K]> }>;

/**
 * Custom Hook for form validation using Zod
 */
export const useFormValidation = <T extends Record<string, any>>(
  schema: SchemaType<T>
) => {
  const [errors, setErrors] = useState<Record<string, string>>({});

  /**
   * Validates a single field based on the schema
   */
  const validateField = useCallback(
    (name: any, value: any) => {
      try {
        const fieldSchema = schema.shape[name];
        if (!fieldSchema) return;

        const singleFieldSchema = z.object({ [name]: fieldSchema });

        singleFieldSchema.parse({ [name]: value });

        setErrors((prev) => {
          const newErrors = { ...prev };
          delete newErrors[name as string];
          return newErrors;
        });

        return true;
      } catch (error) {
        if (error instanceof z.ZodError) {
          const fieldError = error.errors[0]?.message;
          setErrors((prev) => ({
            ...prev,
            [name as string]: fieldError,
          }));
          return false;
        }
      }
    },
    [schema]
  );

  /**
   * Validates the entire form based on the schema
   */
  const validateForm = useCallback(
    (data: T) => {
      try {
        schema.parse(data);
        setErrors({});
        return { success: true, errors: null };
      } catch (error) {
        if (error instanceof z.ZodError) {
          const newErrors = Object.fromEntries(
            error.errors.map(({ path, message }) => [path[0], message])
          );
          setErrors(newErrors);
          return { success: false, errors: newErrors };
        }
        return { success: false, errors: { form: "Validation failed" } };
      }
    },
    [schema]
  );

  return {
    errors,
    validateField,
    validateForm,
  };
};

Let's explain each part

Code Explanation
1. Type Definition (UseZodValidationProps)

type SchemaType<T> = ZodObject<{ [K in keyof T]: ZodSchema<T[K]> }>;

This type defines the shape of the props that the useZodValidation hook will receive. The hook expects a schema prop, which is a ZodSchema (a validation schema from the Zod library). The T represents a generic type for form data (the schema type).
2. State for Errors (useState)

const [errors, setErrors] = useState<Record<string, string>>({});

errors is a state variable that will store validation errors for each field. It's an object where each key is a field name, and the value is the corresponding error message.
setErrors is used to update this state.
3. validateField Function

const validateField = useCallback(
    (name: any, value: any) => {
      try {
        const fieldSchema = schema.shape[name];
        if (!fieldSchema) return;

        const singleFieldSchema = z.object({ [name]: fieldSchema });

        singleFieldSchema.parse({ [name]: value });

        setErrors((prev) => {
          const newErrors = { ...prev };
          delete newErrors[name as string];
          return newErrors;
        });

        return true;
      } catch (error) {
        if (error instanceof z.ZodError) {
          const fieldError = error.errors[0]?.message;
          setErrors((prev) => ({
            ...prev,
            [name as string]: fieldError,
          }));
          return false;
        }
      }
    },
    [schema]
  );

validateField is called when you want to validate a single field dynamically (e.g., on each input change).

Parameters:

**name: **The name of the field to validate (e.g., "email"). value: The current value of the field (e.g., the input value).

Inside the function:

singleFieldSchema.parse({ [name]: value }); This uses Zod's parse method to validate the specific field (name) against the schema. The schema is designed to validate the entire object, so we pass a partial object with just the field we're validating. If validation fails we extract the error message from the catch block and update the errors state with the field's error message. If the field is valid, we remove any previous error for that field from the errors state.

4. validateForm Function

const validateForm = useCallback(
    (data: T) => {
      try {
        schema.parse(data);
        setErrors({});
        return { success: true, errors: null };
      } catch (error) {
        if (error instanceof z.ZodError) {
          const newErrors = Object.fromEntries(
            error.errors.map(({ path, message }) => [path[0], message])
          );
          setErrors(newErrors);
          return { success: false, errors: newErrors };
        }
        return { success: false, errors: { form: "Validation failed" } };
      }
    },
    [schema]
  );

  return {
    errors,
    validateField,
    validateForm,
  };
};

validateForm is used to validate the entire form (all fields) at once.

Parameters:

data: The form data (an object) that needs to be validated against the schema.

Inside the function:

parse(data): This validates the entire form data. If validation fails, it formats the error and creates an errors object containing error messages for each invalid field. The setErrors function is then called to update the state with these errors. If validation passes, it clears any previous errors by setting setErrors({}) and returns true to indicate success.

5. Return Object

return { errors, validateField, validateForm };

The hook returns the following:

errors: The current errors object containing validation error messages for the form fields.
validateField: A function to validate a single field in real-time (for example, when the user types in a field).
validateForm: A function to validate the entire form (for example, when submitting the form).

How This Works in a Component

You can use this hook in your form components to manage field validation.

validateField is used for validating individual fields in real-time (e.g., when a user types in a field).
validateForm is used when submitting the form, to ensure that all fields are validated at once.

Let's see an example to use this hook in a form

Example Usage in a Component

import React, { useState } from "react";

import { z } from "zod";
import { useFormValidation } from "./hooks/form-validation";

// Define a validation schema using Zod
const schema = z.object({
  name: z.string().min(3, "Name must be at least 3 characters"),
  email: z.string().email("Invalid email address"),
  age: z.preprocess(
    (val) => Number(val),
    z.number().min(18, "Must be at least 18")
  ),
});

const MyForm = () => {
  const { errors, validateField, validateForm } = useFormValidation(schema);

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    age: 18,
  });

  const onChangeHandler = (field: keyof typeof formData, value: any) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    validateField(field, value); // Real-time field validation
  };

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Validate the entire form using formData
    const res = validateForm(formData);
    console.log(res);
    if (res.success) {
      console.log("Form Data:", formData);
    }
  };

  return (
    <form onSubmit={onSubmit} className="space-y-4 p-4 border rounded-md w-80">
      <div>
        <label>Name:</label>
        <input
          value={formData.name}
          onChange={(e) => onChangeHandler("name", e.target.value)}
          className="border p-1 rounded w-full"
        />
        {errors.name && <p className="text-red-500">{errors.name}</p>}
      </div>

      <div>
        <label>Email:</label>
        <input
          value={formData.email}
          onChange={(e) => onChangeHandler("email", e.target.value)}
          className="border p-1 rounded w-full"
        />
        {errors.email && <p className="text-red-500">{errors.email}</p>}
      </div>

      <div>
        <label>Age:</label>
        <input
          type="number"
          value={formData.age}
          onChange={(e) => onChangeHandler("age", e.target.value)}
          className="border p-1 rounded w-full"
        />
        {errors.age && <p className="text-red-500">{errors.age}</p>}
      </div>

      <button
        type="submit"
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Submit
      </button>
    </form>
  );
};

export default MyForm;

useState and useEffect

Satyam Kumar — Sun, 19 Jan 2025 18:34:28 +0000

We’re diving into two of the most essential React hooks: useState and useEffect. Whether you’re a beginner or preparing for job interviews.

1. What are React Hooks?

React Hooks are special functions that let you use React features like state and lifecycle methods in functional components. Before hooks, we relied on class components, but hooks have simplified development and made code more readable.

2. useState

The useState hook is used to add state to functional components. It returns two things: the current state and a function to update that state.

Example

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

in this example we are simply setting the count with the help of useState on click event. When we will click the button it will increase the count with 1.

Common Mistakes:

"Updating state directly: count++ — this won't work! Always use the setState function."
"Using useState outside a functional component. Hooks must be called within the component body."
Inside Another Function or Conditional Block (Not Allowed)
React hooks must be called in the same order on every render. If you try to call useState conditionally or inside a nested function, React can't guarantee this, leading to errors.

Example: Incorrect Usage

function Counter() {
  if (true) { // This is a conditional block
    const [count, setCount] = useState(0); // ❌ This will throw an error
  }

  return <div>Invalid Usage</div>;
}

Error Message:
"React Hook 'useState' is called conditionally. React Hooks must be called in the exact same order in every component render."

3. useEffect

useEffect is a React hook that handles side effects in functional components, like data fetching, subscriptions, or manually updating the DOM.
Syntax:

useEffect(() => {
  // Your side effect code here
  return () => {
    // Cleanup code here (optional)
  };
}, [dependencies]);

The dependencies array controls when the effect runs:
Empty ([]): Runs only once, when the component mounts.
No array: Runs after every render.
Specified dependencies: Runs only when those values change.

Example: Timer with useEffect

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // Cleanup the interval on unmount
  }, []); // Empty array ensures this runs only once

  return <h1>Seconds: {seconds}</h1>;
}

export default Timer;

How it works:
- The useEffect runs after the component mounts, setting up an interval to update seconds.
- The cleanup function clears the interval when the component unmounts, preventing memory leaks.

Common Mistakes with useEffect

Missing Dependencies: If you forget to include variables in the dependency array, the effect might not behave as expected.

useEffect(() => {
  console.log(data); // `data` should be in the dependency array
}, [data]);

Infinite Loops: Updating state inside an effect without proper dependencies can cause the effect to run infinitely:

useEffect(() => {
setCount(count + 1); // This causes an infinite loop
});

Advanced Use Cases

Updating Objects in useState When working with objects, always copy the previous state using the spread operator to avoid overwriting unintended properties.

const [user, setUser] = useState({ name: '', age: 0 });

function updateName() {
  setUser((prevUser) => ({ ...prevUser, name: 'John' }));
}

Conditional Effects Only run an effect if a condition is met.

useEffect(() => {
  if (someCondition) {
    console.log('Condition met!');
  }
}, [someCondition]); // Runs when `someCondition` changes

Fetching Data A common use of useEffect is fetching data from an API.

useEffect(() => {
  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    console.log(result);
  }
  fetchData();
}, []); // Runs only once

Job Interview Questions

What are hooks? Can they be used in class components?
Hooks are functions that let you use React features in functional
components. They cannot be used in class components.
What happens if you don’t provide a dependency array in useEffect?
The effect runs after every render, potentially leading to
performance issues or infinite loops.
How do you clean up effects?
By returning a cleanup function from useEffect:

useEffect(() => {
  const interval = setInterval(() => console.log('Running'), 1000);
  return () => clearInterval(interval); // Cleanup
}, []);

Why do we use functional updates in useState? To ensure the state is updated based on the most recent value when the updates depend on the previous state:

setState((prevState) => prevState + 1);

There is a question related to this concept asked commonly in interviews.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1); // Updates count by +1
    setCount(count + 1); // Still uses the same count value (not updated yet)
    setCount(count + 1); // Again, uses the same count value
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Counter;

Let's say if we run this code what you expect to happen. The thing is here you will think if my current count is 1 then it will be 4 after clicking the button but in reality it gonna update the count by just 1 that is count will become 2.

Let's understand this, everytime we do setState(count+1). It is using the same count not the currently updated count because the count will update only at the time of rerendering. When you update a state in React like setState(count + 1) multiple times in a row, the updates do not immediately reflect in the current render. Instead, React batches state updates for performance, and each setState call uses the current value of the state at the time of its execution.

solution:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1); // Uses the latest value of count
    setCount((prevCount) => prevCount + 1); // Updates based on the new value
    setCount((prevCount) => prevCount + 1); // Updates again based on the latest value
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Counter;

When using the functional form of setState, React ensures that each update is based on the most recent state, even if multiple updates are queued.

What Happens Without Clearing the Interval?
Interval Keeps Running:
When you set an interval using setInterval, the JavaScript runtime keeps executing the callback function at the specified time interval, regardless of whether the component is still in the DOM.
Access to Unmounted Component:
The interval callback may try to update the state or interact with the DOM of the component that has already been unmounted. Since the component no longer exists, this leads to warnings or errors.

Example warning in React:
Can't perform a React state update on an unmounted component.

Memory Leak: Since the interval is still running and holding a reference to the callback function, memory associated with the component (e.g., variables, state) cannot be garbage collected. This increases memory usage over time and can degrade application performance.

Build a Secretkeeper app and generate QR code for your message

Satyam Kumar — Sat, 16 Mar 2024 15:20:16 +0000

Summary:

Secretkeeper app let you generate a QR code for your text message which you can share and download and when you scan that QR code with scanner you will get the text message.It is a React+Vite+Typescript app which uses react-qr-code package for generating QR code.

Prerequisites#

Basic knowledge of React.js
Basic Typescript
Tailwind css

To create vite application with react template follow these commands:

Terminal

$npx create-vite secretkeeper

After that choose React template and then choose typescript and press enter.

Now move to secretkeeper directory in terminal or open that folder in terminal directly.

Terminal

$cd secretkeeper

Setup tailwind css in our project#

To setup tailwind css the best way is ofcourse go through tailwind css docs https://tailwindcss.com/docs/guides/vite

Make sure to add content in tailwind.config.js

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Now, install all of the dependencies needed to build this app:

Terminal

npm install @iconify/react html-to-image react-qr-code

Documentation related to these packages:

@iconify/react https://www.npmjs.com/package/@iconify/react
html-to-image https://www.npmjs.com/package/html-to-image?activeTab=readme
react-qr-code https://www.npmjs.com/package/react-qr-code?activeTab=readme

Delete everything from App.tsx in src directory and code it as:

App.tsx

import React from "react";
import QRCodeGenerator from "./Qrcode";

import "./index.css";

const App: React.FC = () => {
  return (
    <div className="flex items-center justify-center w-screen h-screen bg-red-200 App">
      <div className="w-[400px] max-[700px]:w-full max-[700px]:h-full py-8  bg-[#FFBBBB]
     flex flex-col items-center relative">
        <h1 className="text-xl">SecretKeeper</h1>
        <QRCodeGenerator />
      </div>
    </div>
  );
};

export default App;

In App.tsx we import Qrcode component as QRCodeGenerator.

Now we create Qrcode.jsx component in src directory.This component will include an input box for entering text messages and a button to generate a QR code. Additionally, it will provide options todownload the QR code as a PNG file or share it using the Web Share API.

Qrcode.tsx

import React, { useRef, useState } from "react";
import QRCode from "react-qr-code";
import { Icon } from "@iconify/react";
import * as htmlToImage from "html-to-image";

const QRCodeGenerator: React.FC = () => {
  const [inputValue, setInputValue] = useState<string>("");
  const [qrData, setQRData] = useState("");
  const [IsQrcode, setIsQrcode] = useState<boolean>(false);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const qrRef = useRef(null);

  const generateQRCode = () => {
    // Generate your QR code data here, for example:
    setIsQrcode(true);
    setQRData(inputValue);
  };

  const downloadQRCode = async () => {
    if (!qrRef.current) return;

    const dataUrl = await htmlToImage.toPng(qrRef.current, {
      quality: 1,
      // width: qrRef.current.offsetWidth * 2,
      // height: qrRef.current.offsetHeight * 2,
    });

    // download image
    const link = document.createElement("a");
    link.download = "html-to-img.png";
    link.href = dataUrl;
    link.click();
  };

  const shareQRCode = () => {
    if (!qrRef.current) return;
    // Fallback for sharing via WhatsApp

    htmlToImage.toBlob(qrRef.current).then(function (blob) {
      if (!blob) return;
      const filesArray = [
        new File([blob], "qrcode.png", { type: "image/png" }),
      ];
      if (navigator.share) {
        navigator
          .share({
            files: filesArray,
            title: "QR Code",
            text: "Scan this QR code",
          })
          .then(() => console.log("Shared successfully"))
          .catch((error) => console.error("Error sharing:", error));
      } else {
        // console.log("Web Share API not supported");
        const blobUrl = URL.createObjectURL(blob); // Convert Blob to a data URL
        const whatsappURL = `whatsapp://send?text=Scan this QR code&files=${encodeURIComponent(
          blobUrl
        )}`;

        // Fallback for sharing via email
        const emailBody = "Scan this QR code";
        const emailSubject = "QR Code";
        const emailURL = `mailto:?subject=${encodeURIComponent(
          emailSubject
        )}&body=${encodeURIComponent(emailBody)}`;
        // Open a new window to trigger the default email client
        window.open(emailURL);
        // Open WhatsApp if the device supports it
        window.location.href = whatsappURL;
      }
    });
  };

  return (
    <div className="relative flex flex-col items-center justify-center flex-1 w-full p-4">
      <input
        className="w-full p-4 border-none outline-none"
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="Enter text for QR code"
      />
      <button
        className="px-4 py-2 my-4 bg-white border-none outline-none"
        onClick={generateQRCode}
      >
        Generate QRCode
      </button>
      {IsQrcode && (
        <div className="flex justify-between w-full my-4 ">
          <div className="qrcode">
            <QRCode
              style={{
                background: "white",

                border: "2px solid black", // Set border style
                padding: "10px", // Add some padding for better appearance
                display: "inline-block", // Ensure the container wraps QR code
              }}
              ref={qrRef}
              className="w-[150px] h-[150px] rounded-md"
              value={qrData}
            />
          </div>
          <div className="flex items-center justify-center buttons">
            <button
              className="p-2 mx-4 bg-white rounded-full download"
              onClick={downloadQRCode}
            >
              <Icon
                className="w-10 h-10"
                icon="material-symbols:download-sharp"
              />
            </button>
            <button
              className="p-2 mx-4 bg-white rounded-full send"
              onClick={shareQRCode}
            >
              <Icon className="w-10 h-10" icon="bitcoin-icons:share-filled" />
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default QRCodeGenerator;

In this file we have used React useRef Hook to refer qrcode html element.qrRef is refering to QRCode html element so that we can download it using html-to-tmage package and share it.

Here we imported QRCode from react-qr-code package.To generate QRCode using this package we just need to pass a prop value={qrData}, qrData is the message we want to encode as QRCode.

Then we created a function handleInputChange for contorolled input box and other function generateQRCode, generate QRCode button will call this function onclick and this will set isqrcode=true so that qrcode will be visible on the page and also setQRData(inputValue) using Reacthook. Then we will use qrData to generate QRCode.

Basically there is two more function one for downloading QRCode as png and other for sharing using Web Share API.

ownloadQRCode( ): This function invoked when user click on download button and then uses html-to-image package to generate png of QRCode and it will be automatically downloaded using anchor tag.
shareQRCode( ): In the context of the htmlToImage.toBlob() function, it converts the content of an HTML element (in this case, the QR code container) into an image Blob. This Blob can then be used for various purposes, such as downloading the image or sharing it via the Web Share API.

I hope you like this post, don't forget to follow me for more
exciting post like this.

Git Repo:
https://github.com/silentvoice143/secretkeeper

........Thanks........