A truly game changing feature offered by modern React is the ability to create server functions, error score server functions. Allow client components to call async functions executed on the server. Traditionally, if you want to run some code on the server based on a user action, you would need to expose an H-T-P-A-P-I, but with server functions, invoking server code from the client browser is as simple as calling a JavaScript function. To create server functions, they need to be within the context of a use server directive. One way to use this directive is to add it to the top of your module.

As we have done in this example, within this file, we can bring in any server code that we want. For example, here we are bringing in a utility to get the database. Any functions we export within the context of use server will become server functions. For example, the get Likes utility is something that we can invoke from the client. The increment likes utility is something that we can invoke from the client and similarly, the reset likes function is something that we can invoke from the client. A key requirement for server functions is that they must be Asing functions, which is true for all of these utilities. Within our React application, we start off at the server page

and make that initial call to get the current likes. Next, we render out a simple UI that has a simple heading followed by the likes component, which is going to be a client component. The likes component is going to be a client component because we need to handle clicks and for this purpose, we start off this file with a used client directive. We will maintain the currently displayed state using the used state hook provided by React, and then we bring in our server functions into this client site code with this simple import. Within this component, we accept the initial value which we fetched on the server and we use that to initialize the state variable.

We create a utility handler for the thumbs up button, and within that we can seamlessly call the server function. This increment likes function updates account within the database and then returns the updated count, which we store within the state. We create another click handler for the reset button within which we invoke the server Reset likes function and once more we update the state with the returned count. Finally, we render out the UI that displays the current like count, has a button wired to on click up, and then has another button with on click wired to on click reset. Notice how easy it was for us

to call server functions from our client side code and even get back the results returned from the server. Let's take a look at this application in action within the browser. As you would expect, it displays the initial count. We can increment it with a thumbs up and we can even reset it with the reset button. It is important to note that under the hood React is still making STTP calls in order to invoke the server functions, and we can verify that by opening up the network panel. As you make the different function calls, you can see fetch network calls being made by React, but all of the fetch calls the serialization

and de serialization is handled for us, we simply had to invoke a function. You can even define server functions in line anywhere in your server code and pass it as a prop to your client components. As a demonstration, let's create another utility function within our page server component. Since the module Itself is not within the context of a use server directive, we provide that directive as the first line within the function body. With this server function created, we can pass it as a prop to our client component. Now let's modify our component to accept this new prop, we add the decrement likes prop to the function definition,

and it is simply going to be a function that returns a promise of a number. We can use this function just like any of the other server functions. For example, within an on click down utility, we invoke decrement likes, await the result and update our state. Finally, we render a new button with its on click wide to this utility. In terms of behavior, this inline function is going to behave the same as a module function and we can verify that within the browser. In addition to thumbs up, we can now thumbs down. You can observe the pending state of a server function call with a use transition hook that we have also previously covered in our React course.

We've simplified our UI to only show the thumbs up option. We start off by bringing the use transition hook from React. We invoke this within our client component and it returns a couple of two items. One is an is spending state, which will turn true when we are within the context of a start transition callback within our click handler. Instead of invoking the server function directly, we make the call within a start transition callback while the asy callback to start transition is still executing the is spending bullion variable will turn to true. We can use this to render out something custom within the ui.

For example, we can disable the clicker button and even modify the emoji to be an R glass instead of a thumbs up. This is just one application of the used transition hook. Of course, you can create multiple instances and slice and dice the UI however you want. Now let's verify if the pending state is shown to the user within the browser. When we click the thumbs up button, the transition starts, the is pending turns to two. The button is disabled and the icon is changed, and once it completes, the count is incremented and the button returns to thumbs up.