---
title: "Data fetching in an effect (next/fetch-in-effect)"
description: "Fetching in useEffect runs after paint, twice in development, races on fast re-renders and creates client-side waterfalls; the App Router can fetch on the server instead."
url: http://localhost:4173/rules/next/fetch-in-effect
updated: 2026-11-11
---

# Data fetching in an effect

> `next/fetch-in-effect` is a vetd rule. It flags: Data fetching in an effect. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `next/fetch-in-effect` |
| Severity | warning |
| Group | React client code |
| Tags | react, performance |

## Why it matters

Fetching in useEffect runs after paint, twice in development, races on fast re-renders and creates client-side waterfalls; the App Router can fetch on the server instead.

## How to fix it

Fetch in a Server Component and pass the data down, or use SWR / React Query in the client.

## Credit

Based on work by:

- [React team](https://react.dev): You Might Not Need an Effect cautions that fetching in effects races and waterfalls, and prefers framework data fetching.
- [Next.js team](https://nextjs.org): Recommends fetching data in Server Components instead of from the client.

## References

- [You Might Not Need an Effect (fetching data)](https://react.dev/learn/you-might-not-need-an-effect), React
- [Fetching Data](https://nextjs.org/docs/app/getting-started/fetching-data), Next.js
- [useEffect – React](https://react.dev/reference/react/useEffect), React

## See it

Demos in the vetd Lab:

- [Fetch in Server Components](http://localhost:4173/lab/nextjs/fetch-in-server-components)

## Related rules

- [`next/async-effect`](http://localhost:4173/rules/next/async-effect.md)
- [`next/sequential-await`](http://localhost:4173/rules/next/sequential-await.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "next/fetch-in-effect" }`. CLI: `npx vetd explain next/fetch-in-effect`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`next/async-effect`](http://localhost:4173/rules/next/async-effect.md) · Next: [`next/effect-cleanup`](http://localhost:4173/rules/next/effect-cleanup.md)