Q&A Updating Issues with Server Actions

[00:00:00]
>> Student: Could we have a kind of middleware for server actions? It could do getCurrentUser and return a standard error code so that we don't clutter our functions?
>> Scott Moss: That's a great question. Because server actions are just functions, you can just make a function for that and you can make a higher-order function that works as middleware for your functions.

[00:00:20]
You can use whatever pattern you want to do that because they're just functions. There is nothing that Next.js will need to do. So if you don't want to clutter your code with the same logic, yeah, you can make a higher-order function that does that and then calls your server action when it's done, which is a great pattern, yeah.

[00:00:38]
So yeah, I decided to not do the delete stuff so we can get to more important things. But essentially the useTransition hook, it's really simple. First of all, it has nothing to do with Next.js, it is a react thing. So if you don't know more about these new hooks, again, check out Brian Holt's course, he covers this pretty well, I'm pretty sure he does.

[00:00:59]
But essentially, the transition hook allows us to wrap a server action, so in this case deleteIssue, and we get access to the status of that, so whether or not it's pending. So this is great for showing a loader while you're still deleting. It's pretty much the same thing we did with the useActionState hook.

[00:01:20]
But you don't need a form, you can just do it, in this case, on a click, right? So on a click, I'm calling handleDelete and doing the startTransition here. So essentially, as you call startTransition, and the great thing about this is that it won't affect the UI. So whatever you do in here won't block the UI in any way.

[00:01:41]
That's the whole point of it. So this is great for doing things that have to happen on the server, cuz they won't affect the actual user interface and slow things down, if you have an animation or something like that. They just added support for async callbacks in the startTransition, which is great.

[00:01:57]
But yeah, if you are doing something on a user interaction and that user interaction has to call a server action, just do the useTransition hook, do your logic, and you're done.
>> Student: So you wouldn't use this for something that needs to give the user UI feedback?
>> Scott Moss: You wouldn't use this to do this to give the user something.

[00:02:20]
I mean, you can. If you were updating a state in here, there's nothing stopping you from doing that. That's still gonna cause a re-render if you wanna update a state. But in that case, you don't even need to startTransition, just get rid of it and just call deleteIssue directly in the handleDelete.

[00:02:37]
>> Student: And that works, because this deleteIssue button is by default a server component, right?
>> Scott Moss: Yeah, it's a server action.
>> Student: Well, but it's not a client component, right?
>> Scott Moss: Yeah, you can't use hooks unless you are in a client component. So if you see a hook, you're always in a client component.

[00:02:56]
You just can't use hooks on a server-
>> Student: So you'd have to use transition here to call- No, you don't have to.
>> Scott Moss: You literally do not have to use transition here to call await delete. It'll still call it, because essentially this is just an HTTP request.
>> Student: Right, right, right.

[00:03:14]
>> Scott Moss: Yeah.
>> Student: Okay, yeah.
>> Scott Moss: So the client component doesn't know the difference, it doesn't know, it's just an HTTP request. But if you don't want that request interfering with what's happening on the page, it's literally the equivalent of putting this in a useEffect, right? If you put this in a useEffect, it won't really interfere with what's happening on the page.

[00:03:33]
That's essentially what this is.
>> Scott Moss: How many times have you made a function in the useEffect and then called the function in the same useEffect? That's how you'd have to make an HTTP request, you'd have to make a useEffect, right? You'd have to do something like this. You have to say useEffect,
>> Scott Moss: And then you have to say do the thing.

[00:03:58]
>> Scott Moss: And then underneath it, you have to call doThing. Because you can't do asynchronous things in a client component, so this is how you have to do an asynchronous thing, right? This is how you would do the thing. That's gross, so instead, you can just call useTransition and do it here.