Thumbnail

useActionState — A New Hook in React 🎉

Hello Developers 👋, It’s me 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] = 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.

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!

Happy coding!

Follow for more