ReactJS
React Hook Form v19: A Complete Guide for Developers
React Hook Form (RHF) is a React feature to handle form state and validation that helps you to create interactive controls for submitting information. To manage forms in your components.
There are two main hooks, which allow you to make updates to the UI based on the status of a form.
1.useActionState
2.useFormStatus
Key Features:
The library is minimal, which means it performs well.
Optimized for performance, meaning renders are isolated to only affected fields.
Built-in support for form validation through Yup, Zod or custom rules
Works smoothly with controlled as well as uncontrolled components.
Strong type checking is supported through TypeScript.
1. useActionState
The useActionState function wraps the action directly, and returns a tuple of values to update the state based on the result of a form action.
Basic Example
import { useActionState } from "react";
async function increment(previousState, formData) { return previousState + 1;}function StatefulForm() { const [state, formAction] = useActionState(increment, 0); return ( <form> {state} <button formAction={formAction}>Increment</button> </form> );}export default StatefulForm;Example with submitting a form and display information after submitting a form App.js
import { useActionState, useState } from "react";
import { addToCart } from "./actions.js";function AddToCartForm({ itemID, itemTitle }) { const [message, formAction, isPending] = useActionState(addToCart, null); return ( <form action={formAction}> <h2>{itemTitle}</h2> <input type="hidden" name="itemID" value={itemID} /> <button type="submit">Add to Cart</button> {isPending ? "Loading..." : message} </form> );}export default function App() { return ( <> <AddToCartForm itemID="1" itemTitle="JavaScript: The Definitive Guide" /> <AddToCartForm itemID="2" itemTitle="JavaScript: The Good Parts" /> </> );}
Action.js
"use server";
export async function addToCart(prevState, queryData) { const itemID = queryData.get("itemID"); // Add a fake delay so that waiting becomes visible. await new Promise((resolve) => setTimeout(resolve, 2000)); if (itemID === "1") { return "Item added to cart"; } else { return "The item is sold out."; }}2.useFormStatus
The useFormStatus is a Hook that gives you status information of the last form submission.
Basic Example
import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";function Submit() { const { pending } = useFormStatus(); return ( <button type="submit" disabled={pending}> {pending ? "Submitting..." : "Submit"} </button> );}function Form({ action }) { return ( <form action={action}> <Submit /> </form> );}export default function App() { return <Form action={submitForm} />;}Conclusion
React Hook Form simplifies the handling of forms in React using a powerful, yet lightweight API. Whether working with simple forms or complex, nested structures, React Hook Form offers the flexibility and performance required for modern web applications.
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.
React
