There are a limited number of types that react can safely serialize between the server and the client. The applies to props passed from your server components to your client components. Also for server function arguments and even for server function return values. Note that while it is a limited set of types, it is still more than the ones supported with just J. To demonstrate the limitations of JSON serialization, we create a simple API that accepts a J payload and that payload is going to have a member date, which we expect to be of type date because that is what we are going to pass from the client.

Similarly, as a part of the response, we are going to return a member date of type date with our API in place. Let's invoke it from a client page. We make a request with the body containing date of type date, and then we receive the response and see if the return J payload contains a date or not. With our page created, let's take a look at it within the browser. If you've watched a JavaScript course or have worked with JSON before, you probably know the answer anyways. On the server logs, we can see that it is not a date. It is in fact a string because that is how the JavaScript date object serializes with J, and the same is true

for the date returned from the server to the client. It doesn't come through as a date and gets serialized to a string. Let's take a look at how React seamlessly supports common JavaScript types. With its built-in serialization, instead of creating an API, we create a server function that expects to be passed in an object containing a date. We log out the types same as before and same as before. We try to return a date back from the server on the client component. We import the server function and then invoke it. When our component gets mounted as a part of the payload, we pass in a date object to the server, and then from the response we check if we

indeed get a date back. If you run this application within the browser, you can see on the console that indeed we do get a date back from the server and similarly, if you look at the server console, the server did indeed receive a date object from the client. Let's take a look at what happens if you try to serialize the data structure that isn't supported. For this demonstration, we create a simple counter class that maintains account value. Now let's see if this is something that can be serialized by React within a server component. We create an instance of this counter class and then try to pass it to a client component as a prop. The client component will accept the instance of this class

as a prop and then try to use the increment function. I think you can already imagine that this is not going to work, but let's take a look at it within the browser. React handles this particular error quite gracefully and informs us that classes are not supported. Only plain objects and a few built-in scan be passed to client components from several components. As a final note, you can find a simplified reference to which types you can safely serialize in the lesson description. Thank you for joining me and I'll see you in the next one.