Supports useClientActionData to reduce code complexity.

[fzn0x]

export const clientAction = async ({
  request,
  params,
  serverAction,
}: ClientActionFunctionArgs) => {
  const data = await serverAction();

  return data;
};

Thanks for the clientAction, now I can use client-side code easily like toast.

But code is a bit too much when your client-side code requires Function calls to do the job.

For example useToast from Chakra UI.

export const clientAction = async ({
  request,
  params,
  serverAction,
}: ClientActionFunctionArgs) => {
  const data = await serverAction();
  const toast = useToast();
  
  toast({
      title: "Something wrong.",
      description: fetcher?.data?.error,
      status: "error",
      duration: 5000,
      position: "top",
      isClosable: true,
  });
    
  return data;
};

// an index function that needs to call useToast() again..

This is painful.

---

Suggestion

How about create a new API useClientActionData ?

// Home page
async function Index() {
   const toast = useToast(); // no more useToast call twice!
   const data = useClientActionData<typeof clientAction>();
   
}

[sergiodxa]

The useActionData hook should return the data from your clientAction, the same way it returns the data from a server action.

Also, if you do this:

let toast = useToast();
let data = useActionData<typeof clientAction>();

You don't really need a clientAction, just use your server action and call toast in an effect.

---

Also calling useToast inside your clientAction will not work reliable, because clientAction is not a React component or hook, so you shouldn't use hooks inside. Maybe Charka UI should give you a way to import the toast function globally so you can use it inside your clientAction directly.

[fzn0x]

I'm not sure about this approach because idle and loading keeps making my toast shows multiple times.