Using useFormStatus and useFormState a in Next.js 14 with Server Actions

In the ever-evolving landscape of web development, creating efficient and user-friendly forms remains a crucial skill. Next.js, with its powerful features, offers developers robust tools to enhance form functionality. Today, we'll explore two key hooks that can significantly improve your form implementations: useFormState and useFormStatus.

Understanding the Challenge

Form management in React applications often involves complex state handling, submission processes, and UI updates. Next.js addresses these challenges with specialized hooks designed to streamline form operations and improve overall user experience.

Introducing useFormState and useFormStatus

1. useFormState: This hook manages the form's overall state and handles form submissions efficiently.

2. useFormStatus: Provides real-time status updates during the form submission process, enabling responsive UI feedback.

Practical Implementation

Let's examine a real-world example: a newsletter subscription form optimized for performance and user experience.

"use client";
import React, { useRef } from "react";
import { useFormState, useFormStatus } from "react-dom";
import { subscribe } from "@/actions/newsletter";

const SubscribeButton = () => {
  const { pending } = useFormStatus();
  
  return (
    <button
      type="submit"
      disabled={pending}
    >
      {pending ? "Subscribing..." : "Subscribe"}
    </button>
  );
};

const NewsLetter = () => {
  const [state, formAction] = useFormState(subscribe, null);
  const formRef = useRef<HTMLFormElement>(null);
  
  return (
    <form
      ref={formRef}
      action={async (formData) => {
        await formAction(formData);
        formRef.current?.reset(); //to reset form after submision
      }}>
      <DevInput 
        placeholder="Get Informative Content"
        name="email"
      />
      <SubscribeButton />

      {state?.message && (
        <p>
          {state.message}
        </p>
      )}
    </form>
  );
};

export default NewsLetter;

Server-Side Action

To complete our form implementation, let's examine a server-side action that handles the form submission:

export const subscribe = async (
  prevState:any,
  formData: FormData
) => {
  const email = formData.get("email") as string;
  
  try {
    // Simulating an API call or database operation
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // Example validation check
    if (email === "existing@example.com") {
      return { success: false, message: "This email is already subscribed." };
    }
    
    // Successful subscription
    return { success: true, message: "Thank you for subscribing! Please check your inbox." };
  } catch (error) {
    console.error("Subscription error:", error);
    return { success: false, message: "An error occurred. Please try again later." };
  }
};

Key Optimizations and Best Practices

1. Isolated Button Component: The SubscribeButton is a separate component utilizing useFormStatus. This design ensures that only the button re-renders when the form status changes, optimizing performance.

2. Efficient Form Reset: The form reset occurs after the form action completes, ensuring that the form clears only upon successful submission.

3. Optimized State Management: useFormState efficiently manages the form state, minimizing unnecessary re-renders.

4. Conditional Rendering: Success or error messages render only when state.message exists, reducing DOM updates.

5. Type Safety: Utilizing TypeScript with proper type annotations enhances code reliability and developer experience.

Conclusion

By leveraging useFormState and useFormStatus, along with the optimization strategies discussed, developers can create highly performant and user-friendly forms in Next.js applications. Remember that optimization is an ongoing process, and staying informed about the latest best practices in web development is crucial for maintaining cutting-edge applications.

As you implement these techniques, you'll not only enhance user experience but also improve the overall efficiency of your Next.js projects.

Happy coding!