Forem: Anto Vinish

React 19 - Server Actions

Anto Vinish — Thu, 08 Aug 2024 17:25:02 +0000

React form Actions.

React has introduced new form Actions and related hooks to enhance native forms and streamline client-server communication. These features enable developers to handle form submissions more effectively, improving both user experience and code maintainability. For an in-depth exploration of React form Actions, you can refer to my detailed post on my post about React Form Actions.

Server Actions

With React 18, the Server Components feature was introduced. Server components are not Server-Side Rendering (SSR), Server Components are executed exclusively on the server during both runtime and build time. These components can access server-side resources, such as databases and the file system, but they are not capable of performing client-side actions like event listeners or hooks.

Prerequisites

To demonstrate the capabilities of Server Components and Server Actions, we'll use Next.js and Prisma.

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations. Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time with configuration. learn more

Prisma is an ORM that simplifies database access and operations, allowing you to query and manipulate data without writing SQL. Learn more

Initial Setup
Start by creating a new Next.js application:
yarn create next-app server-example

Your initial folder structure will look like this:

Upgrade to the Canary Release to access React 19 features, including Server Actions:

yarn add next@rc react@rc react-dom@rc

install Prisma

yarn add prisma

Prisma Configuration
Create a Prisma schema file at src/lib/prisma/schema.prisma:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  age Int
}

For demonstration purposes, we are using SQLite. For production, you should use a more robust database.

Next, add a Prisma client file at src/lib/prisma/prisma.ts

// ts-ignore 7017 is used to ignore the error that the global object is not
// defined in the global scope. This is because the global object is only
// defined in the global scope in Node.js and not in the browser.

import { PrismaClient } from '@prisma/client'

// PrismaClient is attached to the `global` object in development to prevent
// exhausting your database connection limit.
//
// Learn more:
// https://pris.ly/d/help/next-js-best-practices

const globalForPrisma = global as unknown as { prisma: PrismaClient }

export const prisma = globalForPrisma.prisma || new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

export default prisma

Configure Prisma in package.json:

{
  //other settings
  "prisma": {
    "schema": "src/lib/prisma/schema.prisma",
    "seed": "ts-node src/lib/prisma/seed.ts"
  }
}

And update TypeScript settings in tsconfig.json:

{
  //Other settings here...

  "ts-node": {
    // these options are overrides used only by ts-node
    // same as the --compilerOptions flag and the 
    // TS_NODE_COMPILER_OPTIONS environment variable
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

Install ts-node globally:

yarn global add ts-node

Seeding Initial Data
Add a seed file at src/lib/prisma/seed.ts to populate initial data:

import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
async function main() {
  await prisma.user.create({
    email: "anto@prisma.io",
    name: "Anto",
    age: 35,
  });
  await prisma.user.create({
    email: "vinish@prisma.io",
    name: "Vinish",
    age: 32,
  });
}
main()
  .then(async () => {
    await prisma.$disconnect();
  })
  .catch(async (e) => {
    console.error(e);
    await prisma.$disconnect();
    process.exit(1);
  });

Install Prisma client

yarn add @prisma/client

Run the migration command:

yarn prisma migrate dev --name init

If the seed data is not reflected, add it manually:

yarn prisma db seed

Great! Since the installations are ready, you can create an actions file that performs database operations.

Creating Server Actions
Server Actions are a powerful feature that enables seamless client-server intercommunication. Let's create a file for database operations at src/actions/user.ts:

"use server";
import prisma from '@/lib/prisma/prisma'
import { revalidatePath } from "next/cache";

// export type for user
export type User = {
  id: number;
  name: string | null;
  email: string;
  age: number;
};


export async function createUser(user: any) {
  const resp = await prisma.user.create({ data: user });
  console.log("server Response");
  revalidatePath("/");
  return resp;
}

export async function getUsers() {
  return await prisma.user.findMany();
}

export async function deleteUser(id: number) {
  await prisma.user.delete({
    where: {
      id: id,
    },
  });
  revalidatePath("/");
}

Implementing Server Components

Let's create a React server component to read and render data from the database. Create src/app/serverexample/page.tsx:

import UserList from "./Users";
import "./App.css"

export default async function ServerPage() {
  return (
    <div className="app">
      <header className="App-header">
        <UserList  />
      </header>
    </div>
  );
}

Add some styling in src/app/serverexample/App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

input {
  color: #000;
}

.App-link {
  color: #61dafb;
}

Create components to fetch and render the user list:
src/app/serverexample/UserList.tsx

import { getUsers } from "@/actions/user";
import { UserDetail } from "./UserDetail";

export default async function UserList() {
  //Api call to fetch User details
  const users = await getUsers();

  return (
    <div className="grid grid-cols-3 gap-5">
      {users.length ? (
        users.map((user) => <UserDetail user={user} />)
      ) : (
        <div className="col-span3 opacity-60 text-sm text-center">
          No User found
        </div>
      )}
    </div>
  );
}

src/app/serverexample/UserDetail.tsx

export function UserDetail({ user }) {
  return (
    <div className="flex items-center gap-4 border border-gray-600 py-1 px-4">
      <img
        className="w-10 h-10 rounded-full"
        src="https://api.dicebear.com/9.x/personas/svg?seed=Shadow"
        alt="avatar"
      />
      <div className="font-medium text-base dark:text-white">
        <div>{user.name}</div>
        <div className="text-sm text-gray-500 dark:text-gray-400">
          {user.email}
        </div>
      </div>
    </div>
  );
}

Run the development server:

yarn dev

Navigate to http://localhost:3000/serverexample to see the rendered user list:

By default, components in Next.js are server components unless you specify the "use client" directive. Notice two important points:

Async Component Definition: Server components can be asynchronous as they do not re-render and are only generated once.
Data Fetching: The line const users = await getUsers(); fetches data from the server and renders it at runtime.

Exploring Server Actions

Server Actions enable seamless client-server intercommunication. Let's add a form to create new users.

Create a new file at src/app/serverexample/AddUser.tsx:

"use client";

import "./app.css";
import { useActionState } from "react";
import { createUser } from "../../actions/user";

const initialState = {
  error: undefined,
};

export default function AddUser() {
  const submitHandler = async (_previousState: object, formData: FormData) => {
    try {
      // This is the Server Action method that transfers the control 
      // Back to the server to do DB operations and get back the result.
      const response = await createUser({
        name: formData.get("name") as string,
        email: formData.get("email") as string,
        age: parseInt(formData.get("age") as string),
      });
      return { response };
    } catch (error) {
      return { error };
    }
  };
  const [state, submitAction, isPending] = useActionState(
    submitHandler,
    initialState
  );

  return (
    <div className="mt-10">
      <h4 className="text-center">Add new User</h4>{" "}
      <form action={submitAction} className="text-base">
        <div className="mt-6 text-right">
          Name:{" "}
          <input
            className="ml-2"
            required
            name="name"
            type="text"
            placeholder="Name"
          />
        </div>
        <div className="mt-6 text-right">
          Email:{" "}
          <input
            className="ml-2"
            name="email"
            type="email"
            placeholder="Email"
          />
        </div>
        <div className="mt-6 text-right">
          Age:{" "}
          <input className="ml-2" name="age" type="text" placeholder="Age" />
        </div>
        <div className="mt-6 text-right">
          <button
            disabled={isPending}
            className="bg-green-600 text-white px-5 py-1 text-base disabled:opacity-30"
          >
            {isPending ? "Adding" : "Add User"}
          </button>
        </div>

        {(state?.error as string) && <p>{state.error as string}</p>}
      </form>
    </div>
  );
}

Update src/app/serverexample/page.tsx to include the AddUser component:

import UserList from "./UserList";
// Import new line
import AddUser from "./AddUser";
import "./App.css"

export default async function ServerPage() {
  return (
    <div className="app">
      <header className="App-header">
        <UserList  />
        {/* insert Add User here */}
        <AddUser />
      </header>
    </div>
  );
}

Running the application will now allow you to add new users via the form, with server-side processing handled seamlessly.

The AddUser Component and Seamless Client-Server Interaction

The AddUser component is at the heart of this example, showcasing how React Server Actions can revolutionize the way we handle client-server interactions. This component renders a form for adding new users and leverages the useActionState hook to create a smooth and seamless bridge between the client-side interface and server-side operations.

How It Works

Form Rendering and Data Handling:

The AddUser component provides a form where users can input their name, email, and age.
Upon form submission, the data is captured and prepared to be sent to the server.

useActionState Hook:

The useActionState hook is a crucial part of this setup. It simplifies the complexity of managing client-side state and server-side actions by abstracting them into a unified interface.
This hook accepts an asynchronous handler function, which processes the form data and then calls a Server Action method.
The brilliance of this approach lies in its abstraction: it feels as though you’re invoking a regular function within the same file, even though it actually triggers a server-side operation.

Server Action Method:

The createUser function, defined as a Server Action, executes on the server side. It takes the user data from the form, performs the necessary database operations via Prisma, and returns the result.
This server-side method is crucial for maintaining a clean separation between the client and server, while still enabling them to communicate effectively.

Seamless Integration:

From the perspective of a developer working on the client side, it appears as if the form submission is handled locally. However, the heavy lifting such as database manipulation occurs on the server.
The useActionState hook encapsulates this process, managing the state transitions and handling errors, while maintaining an intuitive API for developers.

Server Actions Without Forms

So that's with forms, now lets test an example without forms.
update src/app/serverexample/UserDetail.tsx

"use client";
import { deleteUser } from "@/actions/user";
import { useTransition } from "react";

export function UserDetail({ user }) {
  const [pending, startTransition] = useTransition();

  const handleDelete = () => {
    startTransition(() => {
      deleteUser(user.id);
    });
  };

  return (
    <div className="flex items-center gap-4 border border-gray-600 py-1 px-4">
      {pending ? (
        <p>Deleting...</p>
      ) : (
        <>
          <img
            className="w-10 h-10 rounded-full"
            src="https://api.dicebear.com/9.x/personas/svg?seed=Shadow"
            alt="avatar"
          />
          <div className="font-medium text-base dark:text-white">
            <div>{user.name}</div>
            <div className="text-sm text-gray-500 dark:text-gray-400">
              {user.email}
            </div>
          </div>
          <button className="ml-auto" onClick={handleDelete}>
            <img className="w-4 h-4" src="/delete.png" alt="" />
          </button>
        </>
      )}
    </div>
  );
}

Key Points:

Server Action: deleteUser(user.id) is a server action that removes the user from the database. This operation is triggered without any form submission.
useTransition: This hook allows you to manage the asynchronous state of the deletion process, showing a "Deleting..." message while the operation is in progress.
User Interface: The component maintains a clean UI, dynamically updating based on the action status.

Now, you can seamlessly delete a user within the application:

Conclusion

This approach is transformative because it abstracts away the complexities of client-server communication. Traditionally, such interactions would require handling API endpoints, managing asynchronous requests, and carefully coordinating client-side state with server responses. With React Server Actions and the useActionState hook, this complexity is reduced, allowing developers to focus more on building features rather than worrying about the underlying infrastructure.

By using this pattern, you gain:

Cleaner Code: The client-side code remains simple and focused, without the need for explicit API calls.
Improved Developer Experience: Server-side operations are seamlessly integrated, reducing cognitive load and potential for errors.
Enhanced Performance: Server Actions are optimized for performance, reducing unnecessary client-server round trips and ensuring that server-side resources are used efficiently.

You can find the full code in the repository

Actions - React 19

Anto Vinish — Thu, 25 Jul 2024 15:46:13 +0000

Actions and Form Utilities in React

React has been a dominant force in the frontend development world for the past decade, thanks to its simplicity and powerful features. Despite its widespread use, one area where React has often been criticized is form handling. Although forms are a crucial part of web development, React hasn't always provided the most straightforward solutions for managing them.

With the advent of React 19, new features and hooks have been introduced, promising to simplify and enhance form handling. Let's dive into these new capabilities and see what they offer.

Classic Form in React

Here's an example of a traditional form in React:

    <form action="/some_post_url">
        <div>
          Name: <input name="name" type="text" placeholder="Name" />
        </div>
        <div>
          Age: <input name="age" type="text" placeholder="Age" />
        </div>
        <div>
          <button type="submit">
            Add User
          </button>
        </div>
    </form>

This form sends data to /some_post_url upon submission. Now, let's explore how new React features can enhance this process.

Using Actions

export default function AddUser() {

  const submitHandler = async (previousState, formData) => {
    try {
      const body = {
        name: formData.get("name"),
        age: formData.get("age"),
      };
      const response = await fetch("http://localhost:3003/users", {
        method: "POST",
        body: JSON.stringify(body),
        headers: {
          "Content-Type": "application/json",
        },
      });
      // return proper response
      return response.json();
    } catch (error) {
      // return error state
      return { error: error.message };
    }
  };

  const [state, submitAction, isPending] = 
         useActionState(submitHandler);


  return (
    <div>
      Add new User
      <form action={submitAction}>
        <div>
          Name: <input name="name" type="text" placeholder="Name" />
        </div>
        <div>
          Age: <input name="age" type="text" placeholder="Age" />
        </div>
        <div>
          <button disabled={isPending}>
            {isPending ? "Adding" : "Add User"}
          </button>
        </div>
        {error && <p>{error}</p>}
      </form>
    </div>
  );
}

submitHandler: A function that handles the form submission by making an API call to create a new user.
useActionState: A new React 19 hook that manages the state and lifecycle of an asynchronous action. It provides [state, submitAction, isPending].
- state: Contains the latest response from the handler function.
- submitAction: A function that can be assigned to the action attribute of the form.
- isPending: Indicates whether the async function is still running, useful for preventing duplicate submissions and providing UI feedback.

In this example, we create a form to add a user, using useActionState to handle the submission and manage the loading state.

useTransition Hook

The useTransition hook is useful for managing transitions in UI states, particularly when performing minor async operations that don't involve forms.

export default function UserList() {
  const [users, setUsers] = useState([]);

  //Make API call to get the list of users
  useEffect(() => {
    getUserData();
  }, []);

  const getUserData = async() => {
      const response = await fetch("http://localhost:3000/users");
      const data = await response.json();
      setUsers(data);
  };

  return  (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {users.map((user) => (
          <UserItem user={user} key={user.id} refreshCache={refreshCache} />
        ))}
      </tbody>
    </table>
  );
}


//User Item

export function UserItem({ user, refreshCache }) {
  const [isDeleting, startDeleteTransition] = useTransition();

  const deleteHandler = (userId) => {
    startDeleteTransition(async () => {
      const response = await fetch(`http://localhost:3000/users/${userId}`, {
        method: "DELETE",
      });
      refreshCache();
    });
  };
  return (
    <tr>
      <td>{user.name}</td>
      <td>{user.age}</td>
      <td>
        {isDeleting ? (
          <div>deleting...</div>
        ) : (
          <button onClick={() => deleteHandler(user.id)}>Delete</button>
        )}
      </td>
    </tr>
  );
}

The useTransition hook helps manage the pending state during the deletion of a user, providing a smoother user experience.

Conclusion

React 19 introduces some exciting new features for handling form submissions and asynchronous operations. These new hooks, like useActionState and useTransition, offer powerful alternatives to traditional methods and third-party libraries. However, only time will tell if they can fully replace established tools like React Hook Form or Formik.

For more information, check out the source repository.

And for understanding about Server Actions read my post