DEV Community: Hastings Kondwani

Getting started with Zod

Hastings Kondwani — Tue, 07 Feb 2023 12:36:44 +0000

Zod is a powerful, flexible, and easy-to-use validation library that can be used with both TypeScript and JavaScript. It provides a simple, expressive syntax for defining complex validation schemas and can be easily integrated with popular frameworks such as Express. In this blog post, we'll take a closer look at what Zod is, how it works, and why you might choose it over other libraries like Yup.

What is Zod?
Zod is a validation library that provides a simple, expressive syntax for defining validation schemas. It allows you to validate data structures and check if they match your defined schema. This is especially useful when working with user-generated data, such as from form submissions or API requests, to ensure that the data meets your application's requirements.

Why Choose Zod?
There are several reasons why you might choose Zod over other validation libraries.

TypeScript Support: Zod has first-class support for TypeScript, making it an excellent choice for TypeScript developers. It integrates seamlessly with TypeScript's type system, allowing you to leverage the benefits of static typing.
Flexible and Powerful Syntax: Zod's syntax is simple, yet powerful. It provides a wide range of validation types, including string, number, boolean, object, array, and more. It also supports custom validators, making it easy to implement complex validation rules.
Exception-Based Error Handling: Zod uses exceptions to signal validation errors, making it easier to handle errors in your application. When a validation error occurs, Zod will throw an exception that you can catch and handle as needed.
Great Performance: Zod is designed to be fast and efficient, and it provides great performance even for large datasets.

How to Use Zod
Here's a simple example of how to use Zod with TypeScript:

import * as z from 'zod';

const userSchema = z.object({
  name: z.string().min(3).max(100),
  age: z.number().integer().min(18).max(100),
  email: z.string().email()
});

const validData = userSchema.validate({
  name: 'John Doe',
  age: 30,
  email: 'john@example.com'
});

console.log(validData);

In this example, we start by importing the Zod library. We then define a userSchema using Zod's syntax. The schema defines the structure of a user object, with constraints on the name, age, and email fields. Finally, we use the validate method to validate a sample user object and log the results to the console.

Integrating Zod with Express

Zod can be easily integrated with Express, a popular Node.js web framework. Here's an example of how you might use Zod to validate a user registration API endpoint:

import express from 'express';
import * as z from 'zod';

const app = express();
const userSchema = z.object({
  name: z.string().min(3).max(100),
  age: z.number().integer().min(18).max(100),
  email: z.string().email()
});

app.post('/register', (req, res) => {
  try {
    const validData = userSchema.validate(req.body);
    // Continue with the registration process
  } catch (error) {
    res.status(400).send({ message: error.message });
  }
});

In this example, we first import the Express and Zod libraries. We then define a userSchema using Zod's syntax. The schema defines the structure of a user object, with constraints on the name, age, and email fields. We then define a POST endpoint for registering a new user. In the endpoint, we use the validate method to validate the incoming request body against the userSchema. If the validation fails, an exception will be thrown, which we catch and respond to with a 400 Bad Request error.

Conclusion
Zod is a powerful, flexible, and easy-to-use validation library that provides a simple and expressive syntax for defining validation schemas in TypeScript and JavaScript. It can be easily integrated with popular frameworks like Express, making it a versatile and convenient tool for validating user input in your application.

My Github: https://github.com/ThatMWCoder
My Linkedin: https://www.linkedin.com/in/hastings-kondwani-9b5a92200/

Zod Official Docs: https://zod.dev/

Understanding the useRef hook

Hastings Kondwani — Thu, 02 Feb 2023 14:07:31 +0000

The useRef hook is one of the many hooks that React provides to allow developers to manage state and side effects in their applications. In this article, we will explore the useRef hook, its use cases, and how to implement it in a React application.

What is the useRef Hook?

The useRef hook creates a reference to an element in the DOM (Document Object Model). It returns an object that has a property called “current” which holds the reference to the element. The “current” property is mutable, meaning it can be updated with a new value whenever needed. The useRef hook provides a way to access and manipulate the DOM elements without triggering a re-render of the component.

Use Cases of the useRef Hook

Accessing DOM Elements: The useRef hook is used to access elements in the DOM directly, without using the state or props. This can be useful for creating animations, handling focus, or measuring elements.

Improving Performance: The useRef hook can be used to improve performance by preventing unnecessary re-renders of a component. For instance, if a component’s value only needs to be updated once, the useRef hook can be used to store the value, and the component will only re-render when the value changes.

How to use the useRef Hook

The useRef hook is used inside a component and is called just like any other hook. The hook returns an object with a “current” property which holds the reference to the element. Here is an example of using the useRef hook to access an input element:

import React, { useRef } from 'react';

function InputExample() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}

In this example, the useRef hook is used to create a reference to the input element. The reference is passed to the input element as a ref prop. The handleClick function is then used to focus the input element when the button is clicked.

Conclusion

The useRef hook is a powerful tool that allows developers to access and manipulate the DOM elements in a React component. With its ability to improve performance by avoiding unnecessary re-renders, the useRef hook is a must-have in any React developer’s toolkit. Whether you need to access elements for animations or just for simple focus management, the useRef hook is the way to go.

Linkedin: https://www.linkedin.com/in/hastings-kondwani-9b5a92200/
Github: https://github.com/ThatMWCoder

The basics of asynchronous JavaScript

Hastings Kondwani — Fri, 27 Jan 2023 19:04:20 +0000

Asynchronous JavaScript refers to the ability of JavaScript to execute code in a non-blocking way, allowing other code to run in the meantime. This is in contrast to synchronous JavaScript, which runs code in a blocking manner, where each line of code must be executed before moving on to the next.

There are several ways to implement asynchronous JavaScript, including callbacks, Promises, and async/await.

Callbacks:
A callback is a function that is passed as an argument to another function, which is then called at a later time. Here's an example of using a callback to log the result of a function:

function add(a, b, callback) {
    setTimeout(() => {
        callback(a + b);
    }, 1000);
}

add(1, 2, (result) => {
    console.log(result); // 3
})

In this example, the add() function takes in two numbers, a and b, and a callback function. The setTimeout() function is used to simulate a delay, and after one second, the callback function is called with the result of a + b.

Promises:
Promises are a more modern way to handle asynchronous code in JavaScript. A promise represents a value that may not be available yet, but will be at some point in the future. Here's an example of using a promise to log the result of a function:

function add(a, b) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(a + b);
        }, 1000);
    });
}

add(1, 2)
    .then((result) => {
        console.log(result); // 3
    })

In this example, the add() function returns a new promise that takes in two functions: resolve and reject. The setTimeout() function is used to simulate a delay, and after one second, the resolve() function is called with the result of a + b.

Async/await:
Async/await is a way to write asynchronous code that looks like synchronous code. It is built on top of promises and allows you to write asynchronous code using a more familiar syntax. Here's an example of using async/await to log the result of a function:

async function add(a, b) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(a + b);
        }, 1000);
    });
}

(async () => {
    const result = await add(1, 2);
    console.log(result); // 3
})()

In this example, the add() function is declared as async and returns a promise. The await keyword is used to wait for the promise to resolve and get the result of the promise.

These are some of the basic examples of how to use callbacks, Promises, and async/await in JavaScript. Each has its own advantages and use cases, and it's important to understand the difference and choose the right one for your project.

Follow me on Linkedin: https://www.linkedin.com/in/hastings-kondwani-9b5a92200/