overreactedby

What Does "use client" Do?

April 25, 2025

Pay what you likeWatch on YouTube

React Server Components (in?)famously has no API surface. It's an entire programming paradigm largely stemming from two directives:

  • 'use client'
  • 'use server'

I'd like to make a bold claim that their invention belongs in the same category as structured programming (if / while), first-class functions, and async/await. In other words, I expect them to survive past React and to become common sense.

The server needs to send code to the client (by sending a

`;
res.text(html);
});

The browser will load that


`;
res.text(html);
});

Then the LikeButton can appear on the page with these props:

function LikeButton({ postId, likeCount, isLiked }) {
function handleClick() {
// ...
}

return (
<button className={isLiked ? 'liked' : ''}>
{likeCount} Likes
button>
);
}

This makes sense, and is in fact exactly how React used to be integrated in server-rendered applications before the advent of client-side routing. You'd need to write a


`;
res.text(html);
});

What we seem to be saying is: have the browser load frontend.js, then find the LikeButton function in that file, and then pass this JSON to that function.

So what if could just say that?

import { LikeButton } from './frontend';

app.get('/posts/:postId', async (req, res) => {
// ...
const jsx = (
<html>
<body>
<LikeButton
postId={postId}
likeCount={likeCount}
isLiked={isLiked}
/>
body>
html>
);
// ...
});
'use client'; // Mark all exports as "renderable" from the backend

export function LikeButton({ postId, likeCount, isLiked }) {
function handleClick() {
// ...
}

return (
<button className={isLiked ? 'liked' : ''}>
{likeCount} Likes
button>
);
}

We're taking a conceptual leap there but stick with me. What we're saying is, these are still two separate runtime environments--the backend and the frontend--but we're looking at them as a single program rather than as two separate programs.

This is why we set up a syntactic connection between the place that passes the information (the backend) and the function that needs to receive it (the frontend). And the most natural way to express that connection is, again, a plain import.

Note how, here too, importing from a file decorated with 'use client' from the backend doesn't give us the LikeButton function itself. Instead, it gives a client reference--something that we can turn into a