Skip to content
Sarj Code 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
"use client";
import { useEffect } from "react";
export function Users() {
  useEffect(() => {
    fetch("/api/users");
  }, []);
  return null;
}
After — preferred Load data while rendering on the server
app/users/page.tsx
import { loadUsers } from "./users-client";
export default async function Users() {
  const users = await loadUsers();
  return <pre>{JSON.stringify(users)}</pre>;
}
app/users/users-client.ts
export async function loadUsers(): Promise<unknown> {
  const response = await fetch("https://api.example.com/users");
  return response.json();
}