React Client Component

A Client Component looks like this:

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>{count} likes</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

You use the "use client" directive to declare the component as a Client Component.

Once a file is marked as a Client Component via the "use client" directive, all its imports and child components are considered part of the client bundle. This means you don’t need to add the same directive to every sub component.