Introduction

React 19 introduces a refined approach to handling client and server components with the explicit directives "use client" and "use server". These directives help developers distinguish between code that runs on the client and code that runs on the server, improving performance, security, and maintainability.

In this article, we will explore use client and use server in React 19 with practical examples.

What is use client?

In React 19, components are assumed to be server components by default. If a component requires client-side interactivity (e.g., event handlers, state, effects), you must explicitly mark it as a client component using "use client".

Example of a Client Component

"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Key Points:

• The "use client" directive at the top marks the file as a client component.
• It can use useState, event handlers, and other client-only React features.
• The component is bundled for the browser and does not run on the server.

What is use server?

use server is a new directive in React 19 that enables developers to define server functions that can be invoked from client components. These functions run only on the server, helping improve security and performance.

Example of a Server Action

"use server";

export async function getUserData() {
  // Fetching from a database or external API
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  return await response.json();
}

Using use server in a Client Component

"use client";
import { useState } from "react";
import { getUserData } from "./serverActions";

export default function UserProfile() {
  const [user, setUser] = useState(null);

  async function loadUser() {
    const data = await getUserData();
    setUser(data);
  }

  return (
    <div>
      <button onClick={loadUser}>Load User</button>
      {user && <p>Name: {user.name}</p>}
    </div>
  );
}

Key Points:

• The function getUserData runs on the server, preventing sensitive logic from being exposed in the client bundle.
• It allows efficient data fetching, reducing client-side processing overhead.
• The client component invokes the server function using an event (e.g., button click).

Best Practices

1. Use use client sparingly – Only mark components as client components if they require interactivity.
2. Keep data fetching on the server – Use use server for secure and efficient data fetching and processing.
3. Avoid mixing directives in a single file – A file should either be a server or a client component, not both.
4. Optimize performance – Reduce the size of the client bundle by keeping as much logic as possible on the server.

Conclusion

React 19’s use client and use server directives provide a clear separation between client and server logic. By leveraging these features correctly, developers can build more efficient, secure, and scalable applications.