TypeScript · performance

no-client-side-data-fetching

eslint:no-client-side-data-fetching

Disallow direct data fetching inside `useEffect` or `useLayoutEffect`.

Why

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

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

Executed by this rule’s unit tests.

Before

src/users.tsx · focus

useEffect(() => { fetch('/api/users'); }, []);

After

src/users.tsx · focus

import { useEffect } from 'react'; useEffect(() => { console.log('mounted'); }, []);

The rule recognizes common fetch clients syntactically and exempts analytics endpoints and non-GET `fetch` calls.

noClientFetch