Skip to content
Sarj Sarj Sarj Standards

no-client-side-data-fetching

Disallow direct data fetching inside useEffect or useLayoutEffect.

noClientFetch Rule source Tests Catalog JSON

Why

Effect-driven reads begin after rendering and can create request waterfalls, duplicate fetches, and loading-state layout shifts.

Fix

Fetch in a React Server Component or Server Action, or use a client cache such as SWR or React Query.

Examples

Before — flagged An effect starts a data request
src/users.tsx
useEffect(() => {
  fetch("/api/users");
}, []);
After — preferred An effect performs no data request
src/users.tsx
import { useEffect } from "react";
useEffect(() => {
  console.log("mounted");
}, []);