useActionState — A New Hook in React 🎉

July 2, 2024

This content originally appeared on DEV Community and was authored by Random

Hello Developers ,

It’s me your friend Md Taqui Imam, and today I’m going to explain a new and exciting hook in React called useActionState.

Follow me in Github

What is useActionState?

useActionState is a new React hook that helps us update state based on the result of a form action.

It’s like a smart helper that remembers things for us and can change them when we submit a form.

Checkout Official Documentation

Important Note: Right now, useActionState is only available in React’s Canary and experimental channels. To get the most out of it, you’ll need to use a framework that supports React Server Components.

How to use useActionState?

To use this hook, we first need to import it from React:

import { useActionState } from ‘react’;
Then, we can use it in our component like this:

const [state, formAction, isPending] = useActionState(actionFunction, initialState);

Here’s what each part means:

‘state’ is our current form state
‘formAction’ is a new action we’ll use in our form
‘actionFunction’ is the function that runs when the form is submitted
‘initialState’ is the starting value of our state

When to use useActionState:

Use this hook when you want to update state based on form submissions, especially if you’re using Server Components and want quicker responses.

Example:

Let’s make a simple counter form using useActionState:

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>
  );
}

In this example, every time we click the button, our count goes up by one. The useActionState hook takes care of updating the state when the form is submitted.

For More Detail and example checkout this video

useActionState – The Most Important New Hook in React / Next.js in 2024 (Server Actions) – YouTube

Check out Semaphor: https://semaphor.cloud (paid sponsorship)Disclaimer: this is a sponsored video (paid). It’s your responsibility to evaluate safety, ac…