useActionState — A New Hook in React 🎉

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 👇

youtube.com

That’s it 😅

Remember, the best way to learn is by doing.

So when useActionState becomes more widely available, give it a try in your projects and see how it can improve your forms!

Alert ⚠️

Don't forget to checkout my new article 🫡

Click Here👋

...

Happy coding!

---

RandomFollow

I'm a self-taught Web developer who is always learning and creating cool Project stuffs.

Comments

[Sebastian Fritsch]

It is definitely nice to use server actions and useActionState, but I still like more control over validation and still prefer Formik + Yup combo. To be honest, the end user doesn't care at the end and cannot tell the difference 👨🏼‍💻

[Random]

Thanks for you suggestions 🫡

[Adesoji1]

What's the difference between useactionstate and use effect

[Random]

Both useActionState and useEffect are hooks in React, but they serve different purposes and are used in different scenarios

[JoelBonetR 🥇]

Just like salt and mackerel. They both are edible "things" used in different scenarios 😅

What I really meant is...

that we should get back the "get a life" trend but with people that use AI for everything while trying to hide it. Stop it. It's sad. If that wasn't enough its even more easy to spot AI generated text than it is to spot SEO directed content written by humans.

[Amrin]

😂😂 too good

[Digvijay25182316]

useActionState : For Form Mutations.
useEffect : lifecycle hook to control components state

[Random]

🙌

[José Pablo Ramírez Vargas]

So React keeps on piling up things on top of things. Poor React devs, having to keep up with this hot mess.

[Random]

😅😅

[Vaggelis Magonezos]

I cant get the message from useActionState to return the server action value, see example

server file :

"use server";
const someServerAction = async (prevState,formData) => {
  try {
    return "success";
  } catch (error) {
    return "error";
  }
};

client file :

"use client"
const SomeClientComponent = () => {
  const [message, formAction, isPending] = useActionState(
    someServerAction,
    "initial"
  );

  console.log(message)

// i get the initial string as defined in the hook, but after form submission, the message becomes undefined where it should log "success" - what am i missing ??

  return (
    <form
      action={formAction}
      className="space-y-6"
    >

..rest is irrelevant

[Shaogat Alam]

Interesting topic! Everything is explained articulately and clearly. For your project, consider checking out this free npm package: select-paginated.

[Devluc]

Great article Taqui. I enjoyed learning from it

[Random]

Thanks Lucian 👏

[gopal keshri hb]

get your code

[Random]

😅

[Syed Muhammad Ali Raza]

Thanks for Sharing

[Random]

Happy to hear you liked it 🥰

[Muhammad Hasanudin]

nice share 😃👍🏻

[Random]

Happy to hear that you liked it 😊