rsnext/errors/react-client-hook-in-server-component.md
Hannes Bornö d89bdb2b0c
Improve errors caused by client hook called in a server component (#44538)
Improve errors caused by client hook called in a server component.

Before
![image](https://user-images.githubusercontent.com/25056922/210399932-02d1071c-0d06-4260-8f1d-7da436e8bca9.png)


After
![image](https://user-images.githubusercontent.com/25056922/210399817-f949fb14-2f81-4309-bfcb-27af38ea1329.png)

Fixes NEXT-311

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2023-01-04 11:01:50 +00:00

40 lines
757 B
Markdown

# 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
import { useEffect } from 'react'
export default function Page() {
useEffect(() => {
console.log('in useEffect')
})
return <p>Hello world</p>
}
```
##### After
```jsx
'use client'
import { useEffect } from 'react'
export default function Page() {
useEffect(() => {
console.log('in useEffect')
})
return <p>Hello world</p>
}
```
### Useful Links
[Server and Client Components](https://beta.nextjs.org/docs/rendering/server-and-client-components)