DEV Community

useActionState — A New Hook in React 🎉

Random on July 02, 2024

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. Fo...

Read full post

Sebastian Fritsch • Jul 3 • Edited

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 • Jul 3

Thanks for you suggestions 🫡

Adesoji1 • Jul 3

What's the difference between useactionstate and use effect

Random • Jul 3

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

JoelBonetR 🥇 • Jul 3 • Edited

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 • Jul 3

😂😂 too good

Digvijay25182316 • Jul 4 • Edited

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

Random • Jul 4

🙌

José Pablo Ramírez Vargas • Jul 3

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

Random • Jul 3

😅😅

Vaggelis Magonezos • Aug 30

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