Convert Component to Client Component

Next.js

React

JavaScript

Technical Specification

Turn a component into a client component to allow hooks like useState and useEffect.

Input/Output Samples

Input:add counter to server page

Output:mark child as client

Optimal Logic Path

"use client";

import { useState } from "react";

export function ClientCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button>;
}

Architectural Deep-Dive

Adding 'use client' opt-in makes a file run in the browser and unlocks hooks and browser APIs.