DEV Community: dickinsontiwari

The Real Life Problem. Beyond Programming.

dickinsontiwari — Sun, 03 Nov 2024 07:46:03 +0000

Many intelligent people make a living by solving complex, often important problems. They work tirelessly in various companies and startups, driven by ambition and purpose. Yet, they often remain unaware of the deeper, existential challenges of life. Despite working long hours and devoting themselves to their careers, they don’t experience a substantial change in their core quality of life. Consider, for instance, the CEO of a successful company. Though they may spend days strategizing and planning, at a fundamental level, their life is not vastly different from anyone else’s. The same basic needs—eating, sleeping, seeking enjoyment, and defending themselves—are shared by both wealthy and ordinary people.

When we reflect deeply, questions arise: “Why do we continue to suffer?” and “Is there a way to experience true, lasting happiness?” To answer these questions, we must first understand what misery truly is. Misery arises when we are separated from our original spiritual nature. Our true position is to be connected to God, to be God-conscious. We are not meant to use our senses solely for personal pleasure; rather, our senses are intended to serve the Supreme Personality of Godhead.

Imagine a child separated from their parent, wandering the streets in distress. Though strangers may offer various distractions—food, toys, or comfort—the child continues to cry, longing for their parent. Similarly, we search for happiness in worldly pursuits and relationships, but they ultimately fail to fulfill us because we are disconnected from our divine origin. We are eternal beings, unchanging fragments of the Supreme Personality of Godhead, yet our association with the material world has led to suffering. Our true nature is one of joy and knowledge, not of sadness and ignorance.

Learning from the experiences of others, we can see that material pursuits alone do not lead to fulfillment. Instead, we should seek spiritual growth, which is a lasting source of happiness and liberation from suffering.

The Vedic tradition offers guidance for spiritual advancement, showing us how to cultivate inner peace and joy, even while living in the material world. It provides a path to transcend suffering and ultimately return “home,” back to Godhead.

My own perspective transformed when I encountered the Krishna Consciousness Movement. This movement was founded in 1966 in New York by His Divine Grace A.C. Bhaktivedanta Swami Prabhupada. His teachings are straightforward: “Just chant Hare Krishna and be happy.” I tried it, and for the first time, I experienced a profound sense of peace and satisfaction. The beauty of chanting is that it can be done anywhere, offering lasting happiness. The practice of chanting the holy names of God dates back over 500 years and is considered a legitimate, time-tested path to spiritual joy.

Thank you for reading.

All glories to Srila Prabhupada. Hare Krishna.

Optimizing React Components: A Guide to useCallback and useMemo

dickinsontiwari — Mon, 16 Oct 2023 03:33:19 +0000

Understanding the Difference Between `useCallback` and `useMemo` in React

In the world of React, performance optimization is a crucial aspect of building efficient applications. Two often-used tools for optimizing child components are the useCallback and useMemo hooks. These hooks allow you to cache data or functions, preventing unnecessary re-renders and improving the overall performance of your application. In this blog post, we will explore the differences between these two hooks, using real-life examples to illustrate when to use each.

The Purpose of `useMemo` and `useCallback`

Before diving into the differences, let's clarify the purpose of useMemo and useCallback.

useMemo: This hook is used to cache the result of calling a function. It's particularly helpful when you want to avoid recalculating a value on every render. The result is only recalculated if one or more of the specified dependencies change.

useCallback: In contrast, useCallback caches the function itself, rather than its result. It's perfect for preventing a function from being recreated on each render, ensuring that it remains consistent as long as the specified dependencies do not change.

Real-Life Example: ProductPage

Let's consider a real-life example involving a Product component. This component displays product information and a form for making a purchase. We'll use this example to illustrate when to use useMemo and when to use useCallback.

First we need to fetch data. I am using Upstash Redis as database. Lets define the home page.

import { Redis } from "@upstash/redis";

const redis = Redis.fromEnv();

export const revalidate = 0; // disable cache

export default async function ProductPage({ productId }) {
  const productDetails = await redis.get(`product:${productId}`);

  // Parse the JSON data if your product details are stored as JSON in Redis
  const product = JSON.parse(productDetails);

  return (
    <div className="container mx-auto p-4">
      <main className="main">
        <h1 className="text-3xl font-bold">Product Details</h1>
          <div>
            <p className="text-lg mt-2">Product Name: {product.name}</p>
            <p className="text-lg">Price: ${product.price.toFixed(2)}</p>
            {/* Add more product details here */}
          </div>
          <Shipping product={product} referrer={referrer} />
      </main>
    </div>
  );
}

Now lets define the shipping component.

// Shipping.tsx
"use client";
import { useMemo, useCallback } from 'react';
import ShippingForm from "@/components/shippingform"

function ShippingComponent({ product, referrer }) {
  const requirements = useMemo(() => {
    return computeRequirements(product);
  }, [product]);

  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + product.id + '/buy', {
      referrer,
      orderDetails,
    });
  }, [product.id, referrer]);

  return (
    <div>
    {/* Another Client Component */}
      <ShippingForm requirements={requirements} onSubmit={handleSubmit} />
    </div>
  );
}

`useMemo` in Action

In this example, requirements is memoized using useMemo. It calculates the requirements based on the product. This is useful because computeRequirements can be a computationally expensive operation. By caching the result of computeRequirements(product), we ensure that the requirements object doesn't change unless the product changes. This prevents unnecessary re-renders of the ShippingForm component.

`useCallback` in Action

On the other hand, the handleSubmit function is cached using useCallback. This function is tied to the productId and referrer values, and we want to ensure that it doesn't get recreated every time the component re-renders. This is particularly important because handleSubmit is an event handler used when the user submits the form. By caching the function itself with useCallback, we make sure that the code won't run until the user actually submits the form, improving performance.

Simplifying `useCallback`

For those already familiar with useMemo, you can think of useCallback as a simplified version. In essence, useCallback is a wrapper around useMemo that caches a function.

function useCallback(fn, dependencies) {
  return useMemo(() => fn, dependencies);
}

When to Choose `useMemo` or `useCallback`

In summary, you should choose useMemo when you want to cache the result of a function call and ensure it doesn't change unless specific dependencies change. On the other hand, opt for useCallback when you want to cache a function itself and prevent it from being recreated on each render, which is particularly useful for event handlers.

By understanding these differences and choosing the appropriate hook for your use case, you can significantly enhance the performance and efficiency of your React applications. Whether you're optimizing data or functions, useMemo and useCallback are powerful tools at your disposal to achieve that goal.

Creating Optimistic Updates in UI with React.js’s new useOptimistic Hook and Next.js 13.4 Server Action

dickinsontiwari — Sat, 14 Oct 2023 11:48:56 +0000

Optimistic updates are a powerful technique in modern web development, especially when it comes to improving the user experience. By updating the user interface optimistically, you can make the app feel more responsive and smooth, even when there’s a slight delay in the server response. In this article, we’ll explore how to implement optimistic updates using React.js’s new useOptimistic hook in combination with Next.js 13.4's server action. We'll build a "Like" button functionality for tweets as an example to demonstrate this technique.

Prerequisites

Before we begin, make sure you have the following installed:

Node.js (with npm or yarn) and a code editor of your choice.
React.js and Next.js installed in your project.

Setting Up the Project

Assuming you already have a Next.js project set up with the necessary files, let’s proceed to implement the optimistic “Like” functionality.

Step 1: Server Action for Like

First, we need to implement the server action to handle the like functionality. In this example, we’ll use a simple database (db) with two schema tables: tweets and likes. The likes table will store the username and tweet_id for the likes. Below is the code for the server action located in ../actions/tweetLike.ts:

// ../actions/tweetLike.ts  

import { db } from "../db";  
import { likes, tweets } from "../db/schema";  
import { revalidatePath } from "next/cache";  
import { eq } from "drizzle-orm";  
import { currentUser } from "@clerk/nextjs";  

export default async function tweetLike(tweet_id: string, Clikes: number) {  
  const user = await currentUser();  
  const tweetPost = await db  
    .update(tweets)  
    .set({ likes: Clikes + 1 })  
    .where(eq(tweets.id, BigInt(tweet_id)));  
  const liked = await db  
    .insert(likes)  
    .values({ tweet_id: BigInt(tweet_id), username: user?.username });  
  revalidatePath("/app");  
}

Step 2: Creating the Optimistic “Like” Button

Now, let’s create the “Like” button component using React.js’s useOptimistic hook. We'll name this component LikeButton and place it in ../components/LikeButton.tsx:

// ../components/LikeButton.tsx  

import { experimental_useOptimistic as useOptimistic } from "react";  
import tweetLike from "../actions/tweetLike";  

export default function LikeButton({  
  likes,  
  tweet_id,  
}: {  
  likes: number | null;  
  tweet_id: any;  
}) {  
  const [optimisticLikes, addOptimisticLikes] = useOptimistic(  
    likes || 0, // Default to 0 likes if null  
    (state, l) => state + 1  
  );  

  return (  
    <div className="flex items-end space-x-3">  
      <svg  
        viewBox="0 0 24 24"  
        aria-hidden="true"  
        fill="#f43f5e"  
        onClick={async () => {  
          addOptimisticLikes(1); // Optimistically increment the like count  
          await tweetLike(tweet_id, optimisticLikes); // Call the server action  
        }}  
        className="r-1gfgf0w r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03 text-blue-500 fill-blue-500 w-6 h-6 cursor-pointer"  
      >  
        {/* SVG code for Like button */}  
      </svg>  
      <span className="text-sm opacity-60">{Number(optimisticLikes)}</span>  
    </div>  
  );  
}

In the LikeButton component, we use the useOptimistic hook to create the optimisticLikes state variable, which holds the optimistic number of likes. The hook takes an initial value (likes prop or 0) and an updater function that increments the state by 1.

When the user clicks the “Like” button, we call the addOptimisticLikes function to optimistically increase the like count. Next, we call the tweetLike server action, passing the tweet_id and the optimistic like count. The server action will handle the actual like process, and in the response, we'll get the updated like count.

Conclusion

In this article, we explored how to create optimistic updates in the UI using React.js’s new useOptimistic hook and Next.js 13.4's server action. By implementing optimistic updates, we can enhance the user experience by making the app feel more responsive and smooth. In the example of a "Like" button for tweets, we showed how to increment the like count optimistically and update it on the server using the provided server action.

Optimistic updates can be used in various scenarios to provide a better user experience and reduce perceived latency in web applications. However, keep in mind that it’s essential to handle potential discrepancies between the optimistic UI and the server’s actual state. In some cases, you may need to handle errors or roll back optimistic updates if the server response indicates a failure.

By combining React.js’s new useOptimistic hook with Next.js's server action, you can take advantage of these powerful features to create a seamless and responsive user interface in your web applications.

Creating a Form in React with React Hook Form and Next.js 13.4

dickinsontiwari — Fri, 13 Oct 2023 11:17:51 +0000

In this tutorial, we will create a login form in a Next.js application using React Hook Form for form handling and validation. We will also use the Zod library to define and validate the form schema. By the end of this tutorial, you will have a fully functional login form with client-side validation.

Prerequisites

Before we begin, ensure you have the following installed:

Node.js and npm (Node Package Manager)
Next.js 13.4 or later

Project Setup

Let’s set up our Next.js project and install the necessary dependencies.

Create a new Next.js project by running the following command:

npx create-next-app login-form-app  
cd login-form-app

Install the required packages for form handling and validation:

npm install react-hook-form @hookform/resolvers zod

Creating the Form

In this example, we’ll create a login form that takes an email and password as input fields.

Create a new file called LoginForm.tsx in the src directory with the following content:

// app/components/LoginForm.tsx  
"use client";  
import { zodResolver } from "@hookform/resolvers/zod";  
import { useRouter } from "next/router";  
import { useForm } from "react-hook-form";  
import * as z from "zod";  
import { loginSchema } from "../zodSchema/login";  

type FormData = z.infer<typeof loginSchema>;  

export default function LoginForm() {  
  const router = useRouter(); const {  
    handleSubmit,  
    register, formState: { errors, isSubmitting, isDirty, isValid },  
  } = useForm<FormData>({ resolver: zodResolver(loginSchema),  
  });  

  async function onSubmit(data: FormData) {  
    console.log(isSubmitting);  
    console.log(data);  
    // Replace this with a server action or fetch an API endpoint to authenticate  
    await new Promise<void>((resolve) => {  
      setTimeout(() => {  
        resolve();  
      }, 2000); // 2 seconds in milliseconds  
    });  
    router.push("/tweets");  
  }  

  return (  
    <div className="selection:bg-rose-500 selection:text-white">  
      <div className="flex min-h-screen items-center justify-center bg-rose-100">  
        <div className="flex-1 p-8">  
          <div className="mx-auto w-80 overflow-hidden rounded-3xl bg-white shadow-xl">  
            {/* Form Header */}  
            <div className="rounded-bl-4xl relative h-44 bg-rose-500">  
              <svg  
                className="absolute bottom-0"  
                xmlns="http://www.w3.org/2000/svg"  
                viewBox="0 0 1440 320"  
              >  
                <path  
                  fill="#ffffff"  
                  fillOpacity="1"  
                  d="M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,85.3C672,75,768,85,864,122.7C960,160,1056,224,1152,245.3C1248,267,1344,245,1392,234.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"  
                ></path>  
              </svg>  
            </div>  

            {/* Form Body */}  
            <div className="rounded-tr-4xl bg-white px-10 pb-8 pt-4">  
              <h1 className="text-2xl font-semibold text-gray-900">  
                Welcome back!  
              </h1>  
              <form  
                className="mt-12"  
                action=""  
                method="POST"  
                onSubmit={handleSubmit(onSubmit)}  
              >  
                {/* Email Input */}  
                <div className="relative">  
                  <input  
                    {...register("email", { required: true })}  
                    id="email"  
                    name="email"  
                    type="text"  
                    className="peer h-10 w-full border-b-2 border-gray-300 text-gray-900 placeholder-transparent focus:border-rose-600 focus:outline-none"  
                    placeholder="john@doe.com"  
                    autoComplete="off"  
                  />  
                  {errors?.email && (  
                    <p className="text-red-600 text-sm">  
                      {errors?.email?.message}  
                    </p>  
                  )}  
                  <label  
                    htmlFor="email"  
                    className="absolute -top-3.5 left-0 text-sm text-gray-600 transition-all peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-focus:-top-3.5 peer-focus:text-sm peer-focus:text-gray-600"  
                  >  
                    Email address  
                  </label>  
                </div>  

                {/* Password Input */}  
                <div className="relative mt-10">  
                  <input  
                    {...register("password", { required: true })}  
                    id="password"  
                    type="password"  
                    name="password"  
                    className="peer h-10 w-full border-b-2 border-gray-300 text-gray-900 placeholder-transparent focus:border-rose-600 focus:outline-none"  
                    placeholder="Password"  
                    autoComplete="off"  
                  />  
                  {errors?.password && (  
                    <p className="text-red-600 text-sm">  
                      {errors?.password?.message}  
                    </p>  
                  )}  
                  <label  
                    htmlFor="password"  
                    className="absolute -top-3.5 left-0 text-sm text-gray-600 transition-all peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-focus:-top-3.5 peer-focus:text-sm peer-focus:text-gray-600"  
                  >  
                    Password  
                  </label>  
                </div>  

                {/* Submit Button */}  
                <button  
                  type="submit"  
                  disabled={!isDirty || !isValid || isSubmitting}  
                  className="mt-20 block w-full cursor-pointer rounded bg-rose-500 px-4 py-2 text-center font-semibold text-white hover:bg-rose-400 focus:outline-none focus:ring focus:ring-rose-500 focus:ring-opacity-80 focus:ring-offset-2 disabled:opacity-70"  
                >  
                  {isSubmitting ? (  
                    <div role="status">  
                      <svg  
                        aria-hidden="true"  
                        className="inline w-6 h-6 mr-2 text-white animate-spin fill-rose-600 opacity-100"  
                        viewBox="0 0 100 101"  
                        fill="none"  
                        xmlns="http://www.w3.org/2000/svg"  
                      >  
                        {/* SVG for Spinner Animation */}  
                      </svg>  
                    </div>  
                  ) : (  
                    "Sign In"  
                  )}  
                </button>  
              </form>  

              {/* Forgot Password Link */}  
              <a  
                href="#"  
                className="mt-4 block text-center text-sm font-medium text-rose-600 hover:underline focus:outline-none focus:ring-2 focus:ring-rose-500"  
              >  
                Forgot your password?  
              </a>  
            </div>  
          </div>  
        </div>  
      </div>  
    </div>  
  );  
}

Now that we have created the LoginForm component, we can import and use it in our main page component.

Create a new file called index.tsx in the pages directory with the following content:

// app/page.tsx  

import LoginForm from "../src/components/LoginForm";  

export default function HomePage() {  
  return (  
      <LoginForm />  
  );  
}

In this file, we have imported the LoginForm component and rendered it inside the HomePage component.

Zod Schema

Next, let’s define the loginSchema using Zod for form validation. Create a new file called login.ts in the src/zodSchema directory with the following content:

// src/zodSchema/login.ts  

import z from "zod";  

export const loginSchema = z.object({  
  email: z.string().email(),  
  password: z.string().min(8),  
});  

export type User = z.infer<typeof loginSchema>;

This schema defines the shape of the data we expect from the login form fields.

Testing the Form

Now, we have a fully functional login form with client-side validation. The form will check if the email is in the correct format and if the password has a minimum length of 8 characters before allowing submission.

To test the form, run your Next.js application:

npm run dev

Visit http://localhost:3000 in your browser to see the login form in action.

Summary

In this tutorial, we learned how to create a login form in a Next.js application using React Hook Form for form handling and validation. We used Zod to define and validate the form schema. The form will display error messages if the user enters invalid data, and it will disable the submit button until the form is filled correctly. This implementation provides a good starting point for creating more complex forms in your React and Next.js projects.

Remember that client-side validation is a great way to improve user experience, but it should not be the only layer of security for a login form. Always ensure that you have robust server-side validation and authentication mechanisms to protect your application from potential security threats.

Happy coding! 🚀

My transition from Medium to Dev.to

dickinsontiwari — Fri, 13 Oct 2023 03:32:02 +0000

As writers, we often find solace in the comfort of a familiar platform, where our words flow freely, and our thoughts find a home. For me, that platform has been Medium. Over time, I've been fortunate to build a following of 113 readers and watched with gratitude as my articles garnered thousands of views. Yet, change is a constant companion in the world of digital content, and I believe it's time to embrace a new chapter in my writing journey.

Why the Move?

You might be wondering why I'm making this switch, considering the comfort and success I've experienced on Medium. The truth is, while Medium has been a fantastic platform, DEV.to offers a unique and refreshing environment that aligns better with my values as a writer.

Community-Centric Approach: DEV.to is renowned for its strong and supportive community, particularly in the tech and development niches. It's a place where writers and readers engage in meaningful conversations, and I'm eager to be part of that.

Open Source and Flexibility: DEV.to is open source, which means more control over my content. I can even customize my DEV.to blog to match my personal branding, giving me the freedom to express my unique style.

No Paywall: Unlike Medium, DEV.to doesn't have a paywall. My content remains freely accessible to everyone, ensuring that knowledge and ideas are shared without barriers.

Editorial Freedom: On DEV.to, I have the freedom to choose my content's licensing and retain full control over my articles. It's all about putting the writer in charge of their own work.

What to Expect

In the coming weeks and months, I'll be moving my articles from Medium to DEV.to. You can expect to find the same thoughtful insights, in-depth explorations, and discussions on topics that matter to me and, hopefully, to you.

I invite you to follow me on this journey. Join me on DEV.to, where we'll continue the conversation, explore new horizons, and engage with a community that's passionate about writing, learning, and growth.

Conclusion

Change can be daunting, but it can also be incredibly rewarding. Transitioning from Medium to DEV.to is a step I'm taking with optimism and excitement. I hope you'll come along for the ride, and together, we'll embark on a new chapter of exploration, learning, and connection. Thank you for being part of this journey.

So, without further ado, let's turn the page and dive into this new adventure on DEV.to. I look forward to what lies ahead, and I hope you do too.

DEV Community: dickinsontiwari

The Real Life Problem. Beyond Programming.

Optimizing React Components: A Guide to useCallback and useMemo

Understanding the Difference Between useCallback and useMemo in React

The Purpose of useMemo and useCallback

Real-Life Example: ProductPage

useMemo in Action

useCallback in Action

Simplifying useCallback

When to Choose useMemo or useCallback

Creating Optimistic Updates in UI with React.js’s new useOptimistic Hook and Next.js 13.4 Server Action

Prerequisites

Setting Up the Project

Step 1: Server Action for Like

Step 2: Creating the Optimistic “Like” Button

Conclusion

Creating a Form in React with React Hook Form and Next.js 13.4

Prerequisites

Project Setup

Creating the Form

Zod Schema

Testing the Form

Summary

My transition from Medium to Dev.to

Why the Move?

What to Expect

Conclusion

Understanding the Difference Between `useCallback` and `useMemo` in React

The Purpose of `useMemo` and `useCallback`

`useMemo` in Action

`useCallback` in Action

Simplifying `useCallback`

When to Choose `useMemo` or `useCallback`