1# Directives
2 
3## React Directives
4 
5These are React directives, not Next.js specific.
6 
7### `'use client'`
8 
9Marks a component as a Client Component. Required for:
10- React hooks (`useState`, `useEffect`, etc.)
11- Event handlers (`onClick`, `onChange`)
12- Browser APIs (`window`, `localStorage`)
13 
14```tsx
15'use client'
16 
17import { useState } from 'react'
18 
19export function Counter() {
20  const [count, setCount] = useState(0)
21  return <button onClick={() => setCount(count + 1)}>{count}</button>
22}
23```
24 
25Reference: https://react.dev/reference/rsc/use-client
26 
27### `'use server'`
28 
29Marks a function as a Server Action. Can be passed to Client Components.
30 
31```tsx
32'use server'
33 
34export async function submitForm(formData: FormData) {
35  // Runs on server
36}
37```
38 
39Or inline within a Server Component:
40 
41```tsx
42export default function Page() {
43  async function submit() {
44    'use server'
45    // Runs on server
46  }
47  return <form action={submit}>...</form>
48}
49```
50 
51Reference: https://react.dev/reference/rsc/use-server
52 
53---
54 
55## Next.js Directive
56 
57### `'use cache'`
58 
59Marks a function or component for caching. Part of Next.js Cache Components.
60 
61```tsx
62'use cache'
63 
64export async function getCachedData() {
65  return await fetchData()
66}
67```
68 
69Requires `cacheComponents: true` in `next.config.ts`.
70 
71For detailed usage including cache profiles, `cacheLife()`, `cacheTag()`, and `updateTag()`, see the `next-cache-components` skill.
72 
73Reference: https://nextjs.org/docs/app/api-reference/directives/use-cache
74