Next.js Discord

Discord Forum

Server Actions on client components

Ocicat posted this in #help-forum
Open in Discord
I have a client component that uses Framer Motion with drag handlers. I have a callback function en the drag end to update the data. For now I'm doing it on the client since in this function I need to update some local states. But I also want to revalidate the data.

How in the following example can I call a server function on a dragEnd callback function?

"use client";

export const MyComponent = () => {
  const handleEndDrag = async () => {
    // Update some states
    // ...
    // Now I want to updat some data on the server using a server action
    // How can I do it?

  return (
  <motion.div drag onDragEnd={handleEndDrag}>
    Hello World

13 Replies

Eric Burel
Use your action directly like "await myAction()"
however please keep in mind that this is not currently clear whether the call should be wrapped into a React transition or not
and other threads on the "useTransition" keyword
I saw a video using useTransition but I don't really understand why it is needed. I can't find any docs about this use case.
Eric Burel
we had to open a thread to ask I didn't have more news either
I think it's a way to connect with "react world"
cause eventhough your event is async, React doesn't know about it
a transition is a way to tell React "well I am running a slow event handler so if the component handler unmounts you may have to do stuff, and also please track it's loading state while I wait for the action to finish"
so I can't tell yet if it's mandatory, a good practice, or just smth you need in very precise scenarios
I mean it's certainly not mandatory cause a direct call do work
but I don't know if it's bad or not
I tried using useTransition and it appears to work pretty well. This clearly solved my problem and seems pretty stable.