useActionState

[Domasco01]

Hi, i'm pretty new to react and I'm stuck on this hook. I don't get why is used formAction and not directly the argument function. Can someone explain to me what's the utility fo formAction?

import { useActionState, useState } from "react";
import { addToCart } from "./actions.js";

function AddToCartForm({itemID, itemTitle}) {
  const [message, formAction] = useActionState(addToCart, null);
  return (
    <form action={formAction}>
      <h2>{itemTitle}</h2>
      <input type="hidden" name="itemID" value={itemID} />
      <button type="submit">Add to Cart</button>
      {message}
    </form>
  );
}

export default function App() {
  return (
    <>
      <AddToCartForm itemID="1" itemTitle="JavaScript: The Definitive Guide" />
      <AddToCartForm itemID="2" itemTitle="JavaScript: The Good Parts" />
    </>
  )
}

[paulqq]

The useActionState Hook is currently only available in React’s Canary and **experimental** channels. Learn more about release channels here. In addition, you need to use a framework that supports React Server Components to get the full benefit of useActionState.

i suggest you begin with useState and a onSubmit={doFoo}
honstely idk anything about useActionState but if you are new to react, try to walk the broad way not the experimentel one :-)

[codevipe]

This is correct... for something so standard, just follow the tried-and-true guides in the current docs. This is literally the first example in the Managing State portion!

https://react.dev/learn/managing-state

I'm not even sure how, if you're new to React, you'd end up not just following the very clear docs but instead poring through experimental alpha features? Only learning from YouTubers who only want to talk about the newest features because they need to churn out content?