Files
vercel__next.js/errors/react-client-hook-in-server-component.mdx
Delba de Oliveira 9c757f6d5c Docs IA 2.0: Server and Client Components (#79143)
Closes: 
- https://linear.app/vercel/issue/DOC-4655/client-components
- https://linear.app/vercel/issue/DOC-4656/server-components
- https://linear.app/vercel/issue/DOC-4657/composition-patterns

Redirects: https://github.com/vercel/front/pull/45564

This PR:

- Adds new **Server and Client Components** page to **Getting Started**
   - Explains how Server and Client components are rendered 
   - Clarifies when to use them
   - Reviews and simplifies composition patterns (examples)
- Improves the **How does PPR work** section in light of static,
dynamic, and streaming.
2025-05-15 14:26:19 +01:00

44 lines
798 B
Plaintext

---
title: React client hook in Server Component
---
## Why This Error Occurred
You are using a React client hook in a Server Component.
## Possible Ways to Fix It
Mark the component using the hook as a Client Component by adding `'use client'` at the top of the file.
### Before
```jsx filename="app/example.js"
import { useEffect } from 'react'
export default function Example() {
useEffect(() => {
console.log('in useEffect')
})
return <p>Hello world</p>
}
```
### After
```jsx filename="app/example.js"
'use client'
import { useEffect } from 'react'
export default function Example() {
useEffect(() => {
console.log('in useEffect')
})
return <p>Hello world</p>
}
```
## Useful Links
- [Server Components](/docs/app/getting-started/server-and-client-components)