Client Components

Overview

Client Components in dinou must begin with the "use client"; directive at the top of the file if they are not imported by other client components.

This applies to files like page.tsx, layout.tsx, not_found.tsx, and error.tsx, since they are entry points and not imported by other components directly.

To avoid surprises, it's recommended to include the "use client"; directive in all client components.

Example

// Client Component page
"use client";

import { useState } from "react";

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

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