DEV Community: Emmanuel Xs

[Boost]

Emmanuel Xs — Sat, 28 Jun 2025 16:33:03 +0000

How to use react-hook-form with useActionState Hook in Nextjs15

Emmanuel Xs ・ Nov 28 '24

#nextjs #reacthookform #useactionstate #react

How to Send Emails for Free in Next.js Using Gmail and Nodemailer

Emmanuel Xs — Wed, 05 Mar 2025 17:47:35 +0000

Want to add email functionality—like sending OTPs (One-Time Passwords) for verification—to your Next.js app without spending a dime? Many email services require a custom domain, but if you’re working on a personal project with no budget for a domain, don’t worry—I’ve got you covered! In this blog, I’ll show you how to use Gmail and Nodemailer to send emails for free in Next.js. There’s a catch, though: these emails might land in spam. I’ll explain why that happens, how to set it up anyway, and what you can do about it. Let’s dive in!

What You’ll Need to Get Started

Before we dive in, make sure you have:

A basic understanding of JavaScript, React, Next.js, or Node.js.
A Gmail account. (I recommend creating a new one for this project to keep things separate—sign up at mail.google.com if you don’t have one)

Why Emails Might Land in Spam (And Why This Method Still Works)

Before we get to the setup, let’s address the elephant in the room: emails sent through Gmail and Nodemailer often end up in spam folders. Here’s why:

No Custom Domain: Gmail’s @gmail.com isn’t yours to authenticate with SPF or DKIM records, which email providers use to verify senders. Without these, your emails look less trustworthy.
SMTP Limits: Gmail’s SMTP setup isn’t optimized for bulk sending, so spam filters might flag it.
Reputation: Free Gmail accounts don’t have the sender reputation of paid services like SendGrid.

Does this make it useless? Not at all! For personal projects, testing, or small-scale use (like sending OTPs to yourself or a few users), it’s still practical. Plus, it’s free and doesn’t need a domain. I’ll share tips later to improve delivery odds.

Step 1: Configure Your Gmail Account

To use Gmail with Nodemailer, you need to allow external apps (like Nodemailer) to send emails through your account. Here’s how, based on your security settings:

If You Don’t Use 2-Step Verification

Go to your Google Account settings.
Enable “Allow less secure apps”.

If You Use 2-Step Verification (Recommended for Security)

Go to your App Passwords settings in your Google Account.
Select “Mail” as the app and “Other” as the device, then name it (e.g., “Nodemailer” or your app’s name).
Click “Generate” and save the 16-character app password—you’ll need this later. The app password generated lets you use nodemailer without giving out your main Gmail password.

Tips:

I prefer using an app password with 2-Step Verification because it’s more secure than enabling “less secure apps” (which is riskier and only needed if your email server is outdated or 2FA isn’t enabled).
If you can’t find these settings, search “app password” or “less secure apps” in your Google Account.

Step 2: Install Nodemailer in Your Next.js Project

Open a terminal in your Next.js project and run:

npm install nodemailer

Nodemailer is a fantastic Node.js library I love for its simplicity and flexibility in sending emails—no domain required!

Step 3: Store Your Gmail Credentials Securely

To keep your Gmail username and password (or app password) safe, use environment variables. Create a .env.local file in your project’s root:

GMAIL_USERNAME=your-email@gmail.com
GMAIL_PASSWORD=your-password-or-app-password

Use your Gmail password if you enabled “less secure apps.”
Use the app password if you went with 2-Step Verification (my recommended approach).

Note: Add .env.local to your .gitignore file to keep it private—never share these credentials!

Step 4: Set Up a Server Action or API Routes to Send Emails

Using Server Actions (Preferred)

Create a file at app/actions/sendEmail.js (for the App Router):

'use server'; // Marks this as a Server Action

import nodemailer from 'nodemailer';

export async function sendEmail(formData) {
  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  const transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 587,
    auth: {
      user: process.env.GMAIL_USERNAME,
      pass: process.env.GMAIL_PASSWORD,
    },
  });

  try {
    await transporter.sendMail({
      from: process.env.GMAIL_USERNAME,
      to: 'recipient@example.com', // Replace with your desired recipient
      subject: `New message from ${name}`,
      text: message,
      replyTo: email,
    });
    return { success: true, message: 'Email sent successfully!' };
  } catch (error) {
    console.error(error);
    return { success: false, message: 'Failed to send email.' };
  }
}

Using API Routes (Alternative)

If you’re using the API routes, you can create app/api/sendEmail.js instead:

import nodemailer from 'nodemailer';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    const transporter = nodemailer.createTransport({
      host: 'smtp.gmail.com',
      port: 587,
      auth: {
        user: process.env.GMAIL_USERNAME,
        pass: process.env.GMAIL_PASSWORD,
      },
    });

    try {
      await transporter.sendMail({
        from: process.env.GMAIL_USERNAME,
        to: 'recipient@example.com',
        subject: `New message from ${name}`,
        text: message,
        replyTo: email,
      });
      res.status(200).json({ message: 'Email sent successfully!' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Failed to send email.' });
    }
  } else {
    res.status(405).json({ message: 'Only POST requests allowed.' });
  }
}

I prefer Server Actions because they’re streamlined and don’t require separate endpoints, but API routes work just as well if you’re on an older setup or like that approach.

Step 5: Create a Form to Trigger Emails with Server Actions

Let’s build a contact form to send emails, tailored to either Server Actions or API Routes.

Using Server Actions

Create app/components/ContactForm.js

import { sendEmail } from '../actions/sendEmail';

export default function ContactForm() {
  const handleSubmit = async (formData) => {
    const result = await sendEmail(formData);
    if (result.success) {
      alert(result.message);
    } else {
      alert(result.message);
    }
  };

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />
      <textarea name="message" placeholder="Your Message" required />
      <button type="submit">Send Email</button>
    </form>
  );
}

Add this to a page, like app/page.js:

import ContactForm from './components/ContactForm';

export default function Home() {
  return (
    <div>
      <h1>Contact Us</h1>
      <ContactForm />
    </div>
  );
}

Using API Routes

If you used the API route approach, tweak the form to fetch the endpoint instead. Here’s how it’d look in components/ContactForm.js:

export default function ContactForm() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);

    try {
      const response = await fetch('/api/sendEmail', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      if (response.ok) {
        alert('Email sent successfully!');
      } else {
        alert('Failed to send email.');
      }
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />
      <textarea name="message" placeholder="Your Message" required />
      <button type="submit">Send Email</button>
    </form>
  );
}

Add it to pages/index.js as before.

Step 6: Test It Out

Let’s make sure it works! Whether you’re using Server Actions or API routes, the testing process is similar.

Using Server Actions

Run your Next.js app with npm run dev.
Visit http://localhost:3000.
Fill out the form and submit it.
Check the recipient’s inbox (or your Gmail “Sent” folder) to confirm the email arrived.

Using API Routes

The steps are the same—just ensure your API route is set up correctly at /api/sendEmail.

If the email doesn’t show up:

Double-check your .env.local file for typos in GMAIL_USERNAME or GMAIL_PASSWORD.
Verify your Gmail security settings (Step 1) are correct.
Look at your terminal for error messages from Nodemailer.
Check your terminal for Nodemailer error messages (e.g., authentication issues).

Improving Delivery: Tips to Avoid Spam

While this method might send emails to spam, here’s how to boost their chances of hitting the inbox:

Use a Clear Subject: Avoid spammy words like “free” or all caps (e.g., “Your OTP Code” vs. “FREE OTP!!!”).
Add Text Content: Include a friendly message (e.g., “Hi, here’s your OTP: 123456”).
Test with Your Own Email First: Gmail trusts emails sent to yourself more.
Limit Sending: Gmail caps at 100-500 emails/day—don’t push it, or you’ll get flagged.

For serious projects, a custom domain and paid service would help, but for free, this is as good as it gets!

Why I Recommend This Method

Despite the spam risk, I love Gmail and Nodemailer because:

It’s free—no need to pay for email services or domains.
It’s beginner-friendly—quick to set up with Next.js.
It’s practical—perfect for small projects without extra complexity.

Other methods might involve paid services or domain setup, but this approach gets the job done without any of that.

Wrapping Up

You’ve just learned how to send emails for free in Next.js with Gmail and Nodemailer—no domain needed! Sure, they might land in spam, but for personal projects or learning, it’s a solid starting point. Try it out, tweak it for your OTP needs, and let me know how it goes in the comments. Happy coding!

Why I want to be a Front-End Developer and How HNG Will Help Me Achieve My Goals

Emmanuel Xs — Fri, 31 Jan 2025 15:56:29 +0000

My Front-End Journey so far.

Hello guys 👋, My name is Emmanuel, and I would like to reminisce about my journey to becoming a developer.

It was my desire and passion for building things that pushed me toward computer science and then programming, specifically front-end development. Initially, I wanted to study engineering, but after a bad experience with physics and mathematics, I found love in programming with the help of my then computer science teacher. Thank you, ma—may God bless you.

Fast forward to 2019, a year after I finished secondary school and was preparing for JAMB, I started dabbling in programming, especially front-end development. I explored many mobile apps like Sololearn, YouTube videos, blogs, and anything I could get my hands on. However, I didn't take it seriously until 2022, when I started doing small projects from Front-end Mentor and pushing them to GitHub.

In 2023, I did my SIWES internship at "Hello World Technologies," where I learned React in one month and built Password Puzzle as a challenge and a defense project for the internship. Seeing how powerful React was in building scalable and interactive UIs motivated me to explore it further. If you're looking to build dynamic web applications, you can hire React.js developers to streamline your development process.

In 2024–2025, I participated in HNG-11 but dropped out. Currently, I am learning Next.js and working on devlinks, an app that consolidates all a developer's social links in one place. Next.js has been a game-changer for me, especially with its performance optimizations and seamless routing. For businesses or teams aiming to build modern, high-performance web apps, it's worth considering hiring Next.js developers to take advantage of its full capabilities.

My Motivation for Becoming a Front-End Developer

I am someone who is interested in using my skills to solve everyday contemporary problems. I love the thrill of resolving bugs and seeing the ideas in my mind come to life. Using my front-end skills to achieve all this is more than enough to keep me going. Making money from my skills is a necessary step, as it not only validates my efforts but also provides me with the resources to solve bigger probl

How HNG Will Help Me Grow

I am enrolling in HNG to possibly get a job, network with people who will enhance my career in front-end development, and also face real-world scenarios through the tasks given. I hope HNG will be the springboard to furthering my career in front-end development.

My Goal for the Internship

My goal is to complete the internship and be a finalist. I plan to achieve this by ensuring I start each stage's tasks on time and complete them promptly. Additionally, I aim to make friends who will support each other throughout this journey.

How to use react-hook-form with useActionState Hook in Nextjs15

Emmanuel Xs — Thu, 28 Nov 2024 15:22:44 +0000

TL;DR: Check out the complete code on my GitHub repository.

Why should you use react-hook-form with the `useActionState` hook

Handling forms in React often involves juggling client-side validation, server-side logic, and a seamless user experience. Enter useActionState, a powerful hook introduced in React to streamline server-side form submissions, and react-hook-form, a robust library for client-side form management. By combining these tools, you can build forms that are resilient, accessible, and user-friendly—even in scenarios where JavaScript is disabled.

Why Use Both?

You might wonder: if useActionState simplifies form handling and comes directly from React, why would we still need react-hook-form?.
The answer lies in the unique strengths of each tool:

react-hook-form excels at providing real-time client-side validation, improving UX by giving users instant feedback.
useActionState focuses on server-side validation and state persistence, ensuring functionality even with JavaScript disabled.

By combining both, you get the best of both worlds:

UAS handles server-side validation and state persistence.
RHF ensures smooth client-side validation and progressive enhancement.

This approach creates a more resilient and user-friendly form-handling solution.

Resources:

Learn more about useActionState.

Explore the documentation for react-hook-form

Prerequisite

This tutorial assumes you're using Next.js 15. If you haven't installed it yet, you can follow the instructions on the Next.js installation guide.

Below are the required tools and packages for this tutorial:

zod: For schema validation.
react-hook-form: To handle client-side form validation.
@hookform/resolvers: Integrates zod with react-hook-form for validation.
shadcn-ui (optional): Quickly sets up essential UI components. Check out their documentation for Next.js 15 .
- For shadcn-ui, you'll need components such as:
- input
- button
- card
- Optional: the form components
Alternatively, you can build your own components if you prefer not to use shadcn-ui.
server-only: Ensures server actions are executed in server components, functions, or hooks that support them.

How to Use `useActionState` (UAS) for Server-Side Validation

Ensure you are familiar with useActionState. If not, refer to the official documentation.

Creating a Login Component

Run the following commands to generate a basic login component using shadcn-ui:

For npm:

npx shadcn@latest add login-01

For pnpm:

pnpm dlx shadcn@latest add login-01

For yarn:

yarn dlx shadcn@latest add login-01

For bun:

bunx shadcn@latest add login-01

Login Component Code

Below is the LoginForm component generated by shadcn-ui. If you're not using shadcn-ui, you can create a similar form manually.

import Link from "next/link";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function LoginForm() {
  return (
    <Card className="mx-auto max-w-sm">
      <CardHeader>
        <CardTitle className="text-2xl">Login</CardTitle>
        <CardDescription>
          Enter your email below to login to your account
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="m@example.com"
              required
            />
          </div>
          <div className="grid gap-2">
            <div className="flex items-center">
              <Label htmlFor="password">Password</Label>
              <Link href="#" className="ml-auto inline-block text-sm underline">
                Forgot your password?
              </Link>
            </div>
            <Input id="password" type="password" required />
          </div>
          <Button type="submit" className="w-full">
            Login
          </Button>
          <Button variant="outline" className="w-full">
            Login with Google
          </Button>
        </div>
        <div className="mt-4 text-center text-sm">
          Don&apos;t have an account?{" "}
          <Link href="#" className="underline">
            Sign up
          </Link>
        </div>
      </CardContent>
    </Card>
  );
}

The above LoginForm component is a form with inputs for email and password, serving as the starting point for this tutorial. It provides a basic structure that can be customized or extended as needed for the application's requirements.

Rendering the Component

If you are not using shadcn-ui, Create a folder named login, then inside it, create a page.tsx file with the following code and import the form you created:

import { LoginForm } from "@/components/login-form"

export default function Page() {
  return (
    <div className="flex h-screen w-full items-center justify-center px-4">
      <LoginForm />
    </div>
  )
}

Adding Schema Validation with `zod`

Create a file named auth-validation.ts to define the schema for form validation:

import { z } from "zod";

export const loginSchema = z.object({
  email: z.string().trim().min(2, "2 or more char").email(), // Trimming to remove unwanted spaces
  password: z.string().trim().min(8, "min char is 8"), // Trimming to remove unwanted spaces
});

The above code is used to validate user inputs from the form, check out zod docs for more info.

Server-Side Validation

Create a server action to validate form data. Use the schema defined above for validation.

"use server";
import "server-only";
import { loginSchema } from "./auth-validation";

type FormState = {
  success: boolean;
  fields?: Record<string, string>;
  errors?: Record<string, string[]>;
};

export async function loginAction(
  prevState: FormState,
  payload: FormData
): Promise<FormState> {
  console.log("payload received", payload);

  if (!(payload instanceof FormData)) {
    return {
      success: false,
      errors: { error: ["Invalid Form Data"] },
    };
  }
  // Here, we use `Object.fromEntries(payload)` to convert the `FormData` object into a plain object. This allows us to work with the data in a format that the zod schema understands.

  const formData = Object.fromEntries(payload);
  console.log("form data", formData);

  const parsed = loginSchema.safeParse(formData);

  if (!parsed.success) {
    const errors = parsed.error.flatten().fieldErrors;
    const fields: Record<string, string> = {};

    for (const key of Object.keys(formData)) {
      fields[key] = formData[key].toString();
    }
    console.log("error returned data", formData);
    console.log("error returned error", errors);
    return {
      success: false,
      fields,
      errors,
    };
  }

  if (parsed.data.email === "test@example.com") {
    return {
      success: false,
      errors: { email: ["email already taken"] },
      fields: parsed.data,
    };
  }
  console.log("parsed data", parsed.data);
  return {
    success: true,
  };
}

The loginAction function is designed to be used with React's useActionState hook, which facilitates managing form submission and server-side validation seamlessly. Here's a brief explanation:

Input Handling: The function takes the previous form state (prevState) and new form data (payload) submitted by the user. It ensures the payload is a valid FormData object.
Validation: It uses zod's loginSchema to validate the form data. If validation fails, it extracts the error messages and prepares the fields and errors objects to provide feedback to the user.
Simulated Check: It includes a sample condition to reject an email (test@example.com) to demonstrate additional validation logic beyond schema validation that can come from the server.
Return Structure: The function returns a FormState object containing:
- success: Whether the form submission was successful.
- fields: The user's submitted data, for populating inputs on error.
- errors: Validation and other errors from the server, for displaying feedback.

Adding `useActionState`

"use client";
import Link from "next/link";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useActionState } from "react";
import { loginAction } from "@/app/login/action";

export function LoginForm() {
  const [formState, formAction] = useActionState(loginAction, {
    success: false,
  });

  console.log(formState);
  console.log("fields returned: ", { ...(formState?.fields ?? {}) });

  return (
    <Card className="mx-auto max-w-sm">
      <CardHeader>
        <CardTitle className="text-2xl">Login</CardTitle>
        <CardDescription>
          Enter your email below to login to your account
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form action={formAction} className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="email">Email</Label>
            <Input
              name="email"
              id="email"
              type="email"
              placeholder="m@example.com"
              required
              defaultValue={formState.fields?.email}
            />
            {formState?.errors?.email && (
              <p className="text-destructive">{formState?.errors?.email}</p>
            )}
          </div>
          <div className="grid gap-2">
            <div className="flex items-center">
              <Label htmlFor="password">Password</Label>
              <Link href="#" className="ml-auto inline-block text-sm underline">
                Forgot your password?
              </Link>
            </div>
            <Input
              name="password"
              id="password"
              type="password"
              required
              defaultValue={formState.fields?.password}
            />
            {formState?.errors?.password && (
              <p className="text-destructive">{formState?.errors?.password}</p>
            )}
          </div>
          <Button type="submit" className="w-full">
            Login
          </Button>
          <Button variant="outline" className="w-full">
            Login with Google
          </Button>
        </form>
        <div className="mt-4 text-center text-sm">
          Don&apos;t have an account?{" "}
          <Link href="#" className="underline">
            Sign up
          </Link>
        </div>
      </CardContent>
    </Card>
  );
}

This LoginForm component uses the useActionState hook to manage server-side validation and form submission with the help of the server acrion loginAction. Here's a brief explanation:

Form State Management:
The useActionState hook is used to manage the form state (formState) and handle form submission (formAction). The state tracks the success of the form submission, any input errors, and retains the field values in case of validation failure.
Dynamic Error Feedback:
- The formState.errors object holds validation errors for each field, such as invalid email formats or missing passwords.
- Errors are displayed below the relevant input fields dynamically.
Rehydrating Input Fields:
The defaultValue property is used to repopulate input fields with the last submitted values (formState.fields), ensuring users don't lose their data upon validation failure.
Client-Side or Default Validation:
HTML required attributes ensure the form cannot be submitted with empty values, and also works seamlessly even when JavaScript is disabled.
Submission Logic:
The formAction from the useActionState hook is being passed to the form element through it's action attribute which ensures that the formData is submitted whenever the form is submitted.
Accessibility and User Feedback:
Even when JavaScript is disabled, the form element's action attribute ensures the form submission will work since since it is being handled by the browser and not JavaScript.

Testing with JavaScript Disabled

To test the form submission with JavaScript disabled:

Open the browser inspector with Ctrl + Shift + I.

Run Ctrl + Shift + P and search for Disable JavaScript.

Submit the form and observe how it works without client-side validation.

Run Ctrl + Shift + P and search for Enable JavaScript to enable JavaScript back.

Adding `react-hook-form` (RHF)

Create a new file and copy and paste the code from the LoginForm Component so that we can modify it or paste the code below.

"use client";
import Link from "next/link";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { startTransition, useActionState, useEffect, useRef } from "react";
import { loginAction } from "@/app/login/action";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { loginSchema } from "@/app/login/auth-validation";

export function LoginForm() {
  const [formState, formAction] = useActionState(loginAction, {
    success: false,
  });

  const formRef = useRef<HTMLFormElement>(null);

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors: rhfErrors, isSubmitSuccessful },
  } = useForm<z.output<typeof loginSchema>>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      email: "",
      password: "",
      ...(formState?.fields ?? {}),
    },
    mode: "onTouched",
  });

  console.log(formState);
  console.log("fields returned: ", { ...(formState?.fields ?? {}) });

  useEffect(() => {
    if (isSubmitSuccessful && formState.success) {
      reset();
    }
  }, [reset, isSubmitSuccessful, formState.success]);

  return (
    <Card className="mx-auto max-w-sm">
      <CardHeader>
        <CardTitle className="text-2xl">Login</CardTitle>
        <CardDescription>
          Enter your email below to login to your account
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form
          ref={formRef}
          action={formAction}
          onSubmit={(evt) => {
            evt.preventDefault();
            handleSubmit(() => {
              startTransition(() => formAction(new FormData(formRef.current!)));
            })(evt);
          }}
          className="grid gap-4"
        >
          <div className="grid gap-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="m@example.com"
              required
              defaultValue={formState.fields?.email}
              {...register("email")}
            />
            {formState?.errors?.email && (
              <p className="text-destructive">{formState?.errors?.email}</p>
            )}
            {rhfErrors.email?.message && (
              <p className="text-destructive">{rhfErrors.email?.message}</p>
            )}
          </div>
          <div className="grid gap-2">
            <div className="flex items-center">
              <Label htmlFor="password">Password</Label>
              <Link href="#" className="ml-auto inline-block text-sm underline">
                Forgot your password?
              </Link>
            </div>
            <Input
              id="password"
              type="password"
              required
              defaultValue={formState.fields?.password}
              {...register("password")}
            />
            {formState?.errors?.password && (
              <p className="text-destructive">{formState?.errors?.password}</p>
            )}
            {rhfErrors.password?.message && (
              <p className="text-destructive">{rhfErrors.password?.message}</p>
            )}
          </div>
          <Button type="submit" className="w-full">
            Login
          </Button>
          <Button variant="outline" className="w-full">
            Login with Google
          </Button>
        </form>
        <div className="mt-4 text-center text-sm">
          Don&apos;t have an account?{" "}
          <Link href="#" className="underline">
            Sign up
          </Link>
        </div>
      </CardContent>
    </Card>
  );
}

Explanation of the Updated LoginForm Component

This version of the LoginForm component integrates react-hook-form (RHF) for enhanced client-side form validation and combines it with server-side validation via useActionState (UAS). Here's a detailed breakdown:

Form Reference (formRef):
The formRef is used to access the form DOM element which is passed to the handleSubmit function for validation after transforming its values to a FormData object,.
Form Submission Workflow:
- Prevent Default Behavior: The form's default behavior (navigating to a new URL) is prevented using evt.preventDefault().

Client-Side Validation:
RHF's handleSubmit intercepts the form submission to perform client-side validation defined in the zodResolver.
Start Transition:
The formAction function (provided by UAS) submits the validated FormData to the server action (loginAction).

Why Use startTransition?

React requires server actions (formAction) to be called either inside a form's action attribute or wrapped in startTransition. Without startTransition, React throws an error like:

"An async function was passed to useActionState, but it was dispatched outside of an action context." Wrapping the server action in startTransition ensures the submission logic runs in a non-blocking manner".

Client-Side and Server-Side Validation:
- RHF Validation: RHF validates the inputs on the client side using the Zod schema (loginSchema) and displays dynamic error messages (rhfErrors).

Server-Side Validation: The server validates the form data using the formAction from useActionState. Server-side errors (formState.errors) are displayed alongside client-side errors if they exist.

Handling Default Values:
- defaultValues in RHF's useForm hook ensures input fields are pre-populated with the last submitted values (formState.fields) after a validation error, improving the user experience.
- The defaultValue attribute on individual input fields ensures form functionality even if JavaScript is disabled or fails to load
Reset Form on Success:
The useEffect hook resets the form fields when both client-side validation and server-side submission are successful (isSubmitSuccessful and formState.success).

Caveats

While the code and approach discussed above offer a robust starting point, there are a few limitations worth noting:

Compatibility with the New React Compiler
When used with the new ReactCompiler, the form behaves unexpectedly—it submits successfully only once, then displays all errors from react-hook-form (RHF). To address this, consider using the "use no memo" annotation to prevent unnecessary memoization of the form state.
Potential Overlap with Future RHF Features
RHF may eventually integrate similar functionality natively. Given the simplicity of the current submission logic, this may become a less manual process in future updates. Keeping an eye on RHF’s roadmap could help you avoid redundant patterns.

Can This Be Combined with react-query?

Yes, combining react-query, react-hook-form, and useActionState is not only possible but could result in a cleaner and more streamlined form management system. For instance:

react-query’s useMutation hook provides powerful callbacks (onSuccess, onError, etc.) that can simplify form submission logic.
By leveraging useMutation, you can eliminate the need for a separate useEffect to track the submission lifecycle, allowing for a more declarative approach to managing server-side actions.

However, while this combination is technically feasible, it’s worth considering whether using all three tools simultaneously is overkill for your specific use case. Balancing simplicity with functionality is key to maintaining manageable code.

Conclusion and Acknowledgments

This approach is largely inspired by the work of Jack Herrington, whose insights and examples helped shape this implementation. I encourage you to check out his content for more advanced use cases:

Thank you for reading to the end! If you encounter any issues or have questions, feel free to share them in the comments section below. I’d love to hear your feedback and suggestions.

The Difference between the useState() and useRef() Hooks

Emmanuel Xs — Sat, 29 Jun 2024 20:27:08 +0000

The `useState()` Hook

The bread and butter of every React developer. A hook used to manage the state of our application (client) and re-render components when state changes.

The `useRef()` Hook

A hook that allows you to step outside of the React concept (UI being tied to states, i.e., state changes causing re-renders) and persist values.

Do you know the difference between the two hooks? If yes, are you aware of the nuances and when to use one over the other? If not, don’t worry; you’re in the right place. And for those who have a deep understanding of these hooks, Boss I greet ooh!

The `useState()` Hook Declaration with Example

import React, { useState } from 'react';

const App = () => {
  const [greeting, setGreeting] = useState(" World");
  console.log(`Hello${greeting}!`);

  return (<p>Hello{greeting}!</p>);
};

When the greeting variable above changes, it triggers a re-render of the entire App component..

Some use Case of the `useState()` hook

Capturing form inputs: Typically done using controlled inputs, where the input value is tied to the component's state, and changes to the input field update the state accordingly.

import React, { useState } from 'react';

const ControlledInput = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Current Input: {inputValue}</p>
    </div>
  );
};

export default ControlledInput;

The ControlledInput component uses state to manage the text input's value. Any change to the input field updates the state, with the state updating the displayed value.

Show or Hide Components: e.g Modals. tool-tip, drop-down e.t.c.

import React, { useState } from 'react';

const Modal = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const toggleModal = () => {
    setIsModalVisible(!isModalVisible);
  };

  return (
    <div>
      <button onClick={toggleModal}>
        {isModalVisible ? 'Hide' : 'Show'} Modal
      </button>
      {isModalVisible && (
        <div className="modal">
          <p>This is a modal!</p>
          <button onClick={toggleModal}>Close</button>
        </div>
      )}
    </div>
  );
};

export default Modal;

The Modal component uses state to toggle the visibility of a modal. Clicking the button updates the state, which shows or hides the modal.

Dynamic styling or rendering components.

import React, { useState } from 'react';

const ShowRed = () => {
  const [isRed, setIsRed] = useState(false);

  const toggleColor = () => {
    setIsRed(!isRed);
  };

  return (
    <div>
      <button onClick={toggleColor}>Toggle Color</button>
      <p style={{ color: isRed ? 'red' : 'blue' }}>
        This text changes color!
      </p>
    </div>
  );
};

export default ShowRed;

The ShowRed component toggles text color between red and blue based on the state variable isRed. Clicking the button changes the state, which updates the text color dynamically.

Counters: A classic and popular use case of the useState hook. You’ll often see this example in almost every React tutorial to demonstrate basic state management.

import React, { useState } from 'react';

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

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

export default Counter;

The Counter component displays a count value and provides buttons to increment or decrement it. Clicking the buttons updates the state, which re-renders the component with the new count.

The useRef() hook declaration with example

import React, { useRef } from 'react';

const App = () => {
const greetingRef = useRef("World");
console(`Hello ${greeting}!`);

return (<p>Hello{greeting}!</p>)
//=> Hello World!

When the greetingRef variable above changes it doesn't triggers the re-rendering of the entire App component.

Some use Case of the useRef() hook

Accessing DOM Elements:

import React, { useRef } from 'react';

const Input = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

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

export default Input;

The Input component uses the useRef hook to access a DOM element directly. Clicking the "Focus Input" button triggers handleFocus, which sets focus to the input field using the inputRef.

Storing Mutable Values to Avoid Triggering Re-renders: Another alternative is using the useMemo() or declaring the variable outside the component.

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef();

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(intervalRef.current);
  }, []);

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

export default Timer;

The Timer component uses the useRef hook to store the interval ID and avoid re-renders. setInterval updates the seconds state every second, and the intervalRef ensures that the interval is cleared on component unmount.

Persisting Form Input State: Achieved with uncontrolled inputs, where the value is accessed directly from the DOM via a ref. This allows the input field to operate independently of the component's state and avoids triggering re-renders.

import React, { useRef } from 'react';

const Form = () => {
  const nameRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Name:', nameRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} type="text" placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

The Form component uses the useRef hook to manage form input as an uncontrolled input. The form value is accessed directly from the DOM using nameRef when submitted, without triggering re-renders.

Giving Access to Native HTML Elements DOM to a Hook, Function, or Package:

import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';

const AnimatedBox = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.to(boxRef.current, { x: 100, duration: 2 });
  }, []);

  return <div ref={boxRef} className="box">Animate me</div>;
};

export default AnimatedBox

The AnimatedBox component uses the useRef hook to access a DOM element and animates it with GSAP. The useEffect hook triggers the animation when the component mounts, moving the element 100 pixels to the right over 2 seconds.

The Difference between the two hooks

Purpose:
- useState is used for managing stateful values and causing re-renders when these values change.
- useRef is used for persisting mutable values across renders without causing re-renders.
Re-rendering:
- Changes to values managed by useState will trigger a re-render of the component.
- Changes to values managed by useRef will not trigger a re-render.
Usage:
- Use useState for values that should trigger a re-render when they change (e.g., form inputs, toggles, dynamic data).
- Use useRef for values that should persist across renders without causing a re-render (e.g., DOM references, interval IDs, previous state values).

Tips and Tricks for these Hooks

When to Use useState Over useRef:
- Use useState when you need the UI to update in response to changes in your data.
- Use useRef when you need to keep track of a value that doesn’t affect the UI or should not cause a re-render.
Combining useState and useRef:
- In some cases, you might use both hooks together. For example, you can use useRef to keep track of a previous value and useState for the current value, enabling comparisons without unnecessary re-renders.

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

const Counter = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    // Update the ref with the current count before the component re-renders
    prevCountRef.current = count;
  }, [count]);

  const prevCount = prevCountRef.current;

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

export default Counter;

The Counter component uses both useState and useRef to track the current and previous count values. useState manages the current count and triggers re-renders, while useRef stores the previous count value without causing re-renders.

Avoid Overusing useRef:
- While useRef is powerful, it should not be overused. For most state management needs, useState is the appropriate choice. useRef is best for specific scenarios where you.

My HNG Internship Experience

Before I conclude, I'd like to talk a little about my ongoing internship at HNG. I joined the Frontend Track with the aim of becoming familiar with building and developing web applications in a team and networking with like-minded individuals. You can learn more about the HNG Internship here and explore opportunities to hire top talents from HNG here. I would like for you guys to join me on this Journey with HNG.

Conclusion

Understanding the difference between useState() and useRef() hooks is crucial for building efficient and effective React applications. These hooks serve different purposes and knowing when to use each can greatly enhance your development process.

React Jokes to spice things up.

Why did the React developer break up with his partner?
Because she had too many state issues!

You use useRef, useState but you never useBrain 😄.

DEV Community: Emmanuel Xs

[Boost]

How to use react-hook-form with useActionState Hook in Nextjs15

Emmanuel Xs ・ Nov 28 '24

How to Send Emails for Free in Next.js Using Gmail and Nodemailer

What You’ll Need to Get Started

Why Emails Might Land in Spam (And Why This Method Still Works)

Step 1: Configure Your Gmail Account

If You Don’t Use 2-Step Verification

If You Use 2-Step Verification (Recommended for Security)

Step 2: Install Nodemailer in Your Next.js Project

Step 3: Store Your Gmail Credentials Securely

Step 4: Set Up a Server Action or API Routes to Send Emails

Using Server Actions (Preferred)

Using API Routes (Alternative)

Step 5: Create a Form to Trigger Emails with Server Actions

Using Server Actions

Using API Routes

Step 6: Test It Out

Using Server Actions

Using API Routes

Improving Delivery: Tips to Avoid Spam

Why I Recommend This Method

Wrapping Up

Why I want to be a Front-End Developer and How HNG Will Help Me Achieve My Goals

My Front-End Journey so far.

My Motivation for Becoming a Front-End Developer

How HNG Will Help Me Grow

My Goal for the Internship

How to use react-hook-form with useActionState Hook in Nextjs15

TL;DR: Check out the complete code on my GitHub repository.

Why should you use react-hook-form with the useActionState hook

Why Use Both?

Prerequisite

How to Use useActionState (UAS) for Server-Side Validation

Creating a Login Component

Login Component Code

Rendering the Component

Adding Schema Validation with zod

Server-Side Validation

Adding useActionState

Testing with JavaScript Disabled

Adding react-hook-form (RHF)

Explanation of the Updated LoginForm Component

Why Use startTransition?

Caveats

Can This Be Combined with react-query?

Conclusion and Acknowledgments

The Difference between the useState() and useRef() Hooks

The useState() Hook

The useRef() Hook

The useState() Hook Declaration with Example

Some use Case of the useState() hook

The useRef() hook declaration with example

Some use Case of the useRef() hook

The Difference between the two hooks

Tips and Tricks for these Hooks

My HNG Internship Experience

Conclusion

React Jokes to spice things up.

Why should you use react-hook-form with the `useActionState` hook

How to Use `useActionState` (UAS) for Server-Side Validation

Adding Schema Validation with `zod`

Adding `useActionState`

Adding `react-hook-form` (RHF)

The `useState()` Hook

The `useRef()` Hook

The `useState()` Hook Declaration with Example

Some use Case of the `useState()` hook