{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"There are a few new features introduced in React 19, and we are going to look at the new "},{"type":"text","marks":[{"type":"code"}],"text":"useActionState"},{"type":"text","text":" hook."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useActionState"},{"type":"text","text":" API"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"import { useActionState } from 'react';\n\nconst [state, action, isPending] = useActionState(fn, initialState, permalink);"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Parameters"}]},{"type":"orderedList","attrs":{"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"fn"},{"type":"text","text":" the function that receives two arguments: "},{"type":"text","marks":[{"type":"code"}],"text":"previousState"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"payload"},{"type":"text","text":" and returns the "},{"type":"text","marks":[{"type":"code"}],"text":"nextState"},{"type":"text","text":" "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"initialState"},{"type":"text","text":" The default state. It can be any serialisable value."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"permalink"},{"type":"text","text":" (Optional) A permalink that refers to the unique page URL that this form modifies"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"Returns"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"useTransition"},{"type":"text","text":" returns an array with precisely three items:"}]},{"type":"orderedList","attrs":{"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The current state. In the first render, It will return "},{"type":"text","marks":[{"type":"code"}],"text":"initialState"},{"type":"text","text":", and then the state will be updated with the return values of the action."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The function to put in the "},{"type":"text","marks":[{"type":"code"}],"text":"action"},{"type":"text","text":" prop of the "},{"type":"text","marks":[{"type":"code"}],"text":"form"},{"type":"text","text":" component or the "},{"type":"text","marks":[{"type":"code"}],"text":"formAction"},{"type":"text","text":" prop of the "},{"type":"text","marks":[{"type":"code"}],"text":"button"},{"type":"text","text":" component."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The flag indicates the action is running."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"How To Use "},{"type":"text","marks":[{"type":"code"}],"text":"useActionState"},{"type":"text","text":" Hook"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"\"use client\";\n\nimport { addToCartAction } from \"@/actions/cart\";\nimport { Product } from \"@/types\";\nimport { ReactNode, useActionState } from \"react\";\n\nexport const ProductDetails = ({\n product,\n reviewsSection,\n}: {\n product: Product;\n reviewsSection?: ReactNode;\n}) => {\n const [addToCartResult, addToCart, isPending] = useActionState(\n addToCartAction,\n null\n );\n\n return (\n <>\n

Name: {product.name}

Price: {product.price}

\n {addToCartResult && (\n

\n {addToCartResult.success ? \"Added to cart\" : \"Failed to add to cart\"}\n

\n )}\n {isPending ? (\n

Adding to cart...

\n ) : (\n \n )}\n \n );\n};"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"action.ts"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"\"use server\";\n\nimport { sleep } from \"@/utils\";\n\nconst carts: { productId: number }[] = [];\n\nexport const addToCartAction = async (\n _: { success: boolean } | null,\n formData: FormData\n) => {\n // To mock the server delay\n await sleep(3000);\n carts.push({\n productId: Number(formData.get(\"productId\")),\n });\n\n return {\n success: true,\n };\n};"}]},{"type":"paragraph"}]}

New Features in React 19: useActionState hook