react-expert

name	react-expert
description	Use this skill when you review or write React components (.tsx/.jsx) and need React 19 best practices (especially eliminating unnecessary useEffect).
metadata	{"applyTo":"**/*.tsx, **/*.jsx"}

React Expert Agent Skill (Freelancerino)

You are a React 19 expert who hates unnecessary useEffect. Your mission is to educate developers that most useEffect usage is a code smell and guide them toward proper React patterns.

Non-negotiables (official React rules)

• Render must be pure: no side effects in render, no mutation of non-local values; treat props/state as immutable snapshots.
  • Reference: https://react.dev/reference/rules/components-and-hooks-must-be-pure
• Follow the Rules of Hooks (top-level only; only call from components/custom hooks).
  • Reference: https://react.dev/reference/rules/rules-of-hooks
• Never disable the dependency linter (react-hooks/exhaustive-deps). If deps feel “wrong”, refactor the code (split Effects, move objects/functions, use updater functions).
  • Reference: https://react.dev/learn/removing-effect-dependencies
• Server/Client boundary discipline (RSC): keep 'use client' leaf-ish and pass only serializable props across Server → Client.
  • Reference: https://react.dev/reference/rsc/use-client
• Server Functions / Server Actions: arguments are untrusted input; validate + authorize every mutation.
  • Reference: https://react.dev/reference/rsc/use-server

Core philosophy

useEffect is an escape hatch, not a tool.

React 19 provides better primitives for almost everything developers historically used useEffect for. If you see useEffect, your first instinct should be: "How do I eliminate this?"

Cost & performance implications (Freelancerino)

In this Next.js 16 server-first app, “avoiding effects” is also a cost/perf strategy:

• Fewer and smaller Client Components means smaller bundles and less hydration work.
• Data fetching belongs on the server; moving it to the client often increases requests and hurts caching.
• Keep client islands leaf-ish to preserve streaming and reduce render churn.

For Vercel-specific cost guidance: .github/skills/nextjs-cost-performance/SKILL.md

The useEffect elimination hierarchy

Before writing useEffect, ask these questions in order:

1. Can this be derived from props/state? → Just calculate it

// ❌ BAD: useEffect to "sync" derived state
const [fullName, setFullName] = useState("");
useEffect(() => {
  setFullName(`${firstName} ${lastName}`);
}, [firstName, lastName]);

// ✅ GOOD: Just compute it
const fullName = `${firstName} ${lastName}`;

Rule: If you're setting state based on other state/props, you don't need state OR effect.

2. Is this data fetching? → Fetch in Server Components

// ❌ BAD: useEffect for data fetching in client
useEffect(() => {
  fetch("/api/users")
    .then((res) => res.json())
    .then(setUsers);
}, []);

// ✅ GOOD: Server Component fetches, passes data down
// In page.tsx (Server Component)
const users = await db.query.users.findMany({
  where: eq(users.workspaceId, workspaceId),
});
return <UserList users={users} />;

Rule: In Next.js 16, data lives in Server Components. Clients receive data as props.

3. Is this a form submission/mutation? → Use Server Actions

// ❌ BAD: useEffect + fetch for mutations
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
  if (shouldSubmit) {
    fetch("/api/submit", { method: "POST", body: JSON.stringify(data) });
  }
}, [shouldSubmit, data]);

// ✅ GOOD: Server Action with form
async function createClient(formData: FormData) {
  "use server";
  // validate, mutate, revalidate
}

<form action={createClient}>
  <input name="name" />
  <SubmitButton />
</form>;

Rule: Mutations belong in Server Actions. Use useActionState for pending/error states.

4. Is this responding to user events? → Handle in event handlers

// ❌ BAD: useEffect to react to state change from user action
useEffect(() => {
  if (selectedId) {
    analytics.track("item_selected", { id: selectedId });
  }
}, [selectedId]);

// ✅ GOOD: Track in the event handler that caused the change
function handleSelect(id: string) {
  setSelectedId(id);
  analytics.track("item_selected", { id });
}

Rule: If a user action caused it, handle the side effect in that action's handler.

If you need to read the latest state/props inside an Effect without re-running it, use Effect Events (useEffectEvent) rather than lying to the dependency array.

• Constraints: Effect Events should only be called from within Effects; don’t pass them to other components/hooks.
• Reference: https://react.dev/reference/react/useEffectEvent

5. Is this initializing from external source? → Use initializer functions or refs

// ❌ BAD: useEffect to initialize from localStorage
const [theme, setTheme] = useState("light");
useEffect(() => {
  setTheme(localStorage.getItem("theme") || "light");
}, []);

// ✅ GOOD: Lazy initializer (runs once, no hydration mismatch risk with SSR)
const [theme, setTheme] = useState(() => {
  if (typeof window === "undefined") return "light";
  return localStorage.getItem("theme") || "light";
});

6. Is this subscribing to external store? → Use useSyncExternalStore

// ❌ BAD: useEffect for subscriptions
useEffect(() => {
  const unsubscribe = store.subscribe(() => setData(store.getState()));
  return unsubscribe;
}, []);

// ✅ GOOD: useSyncExternalStore
const data = useSyncExternalStore(store.subscribe, store.getState);

7. Is this for optimistic UI? → Use useOptimistic

// ❌ BAD: useEffect to manage optimistic state
useEffect(() => {
  if (pendingItem) {
    setItems((prev) => [...prev, pendingItem]);
  }
}, [pendingItem]);

// ✅ GOOD: useOptimistic
const [optimisticItems, addOptimisticItem] = useOptimistic(
  items,
  (state, newItem) => [...state, newItem]
);

8. Is this for non-urgent updates? → Use useTransition or useDeferredValue

// ❌ BAD: useEffect to debounce search
useEffect(() => {
  const timer = setTimeout(() => setDebouncedQuery(query), 300);
  return () => clearTimeout(timer);
}, [query]);

// ✅ GOOD: useDeferredValue (React handles the timing)
const deferredQuery = useDeferredValue(query);

9. Is this imperative DOM manipulation? → Use refs with cleanup callbacks

// ❌ BAD: useEffect for focus
useEffect(() => {
  inputRef.current?.focus();
}, [shouldFocus]);

// ✅ GOOD: Ref callback (React 19)
<input
  ref={(node) => {
    if (node && shouldFocus) node.focus();
  }}
/>;

10. Is this truly synchronizing with external system? → OK, maybe useEffect

Legitimate useEffect uses:

• Connecting to WebSocket/real-time systems
• Integrating with non-React libraries (D3, map libraries, etc.)
• Managing browser APIs that require cleanup (IntersectionObserver, ResizeObserver)
• Analytics page view tracking (not event tracking!)

Even then, extract to a custom hook with a clear name.

Red flags to catch

🚨 Immediate bans

Pattern	Why it's wrong	Fix
useEffect + setState with same deps	Creating render loops	Derive the value
useEffect + fetch	Should be Server Component	Move fetch to server
useEffect with empty deps for data	Race conditions, no Suspense	Server Component or React Query
useEffect to "reset" state on prop change	Derived state antipattern	Use key prop or derive
useEffect + setInterval without cleanup	Memory leak	Add cleanup, or question if needed

⚠️ Strong suspicion

Pattern	Question to ask
Any useEffect in a component	"Can I delete this?"
useEffect with [prop] dependency	"Should this be an event handler?"
Multiple useEffect in one component	"Is this component doing too much?"
useEffect that sets state	"Can I derive this instead?"
useEffect with object/array deps	"Am I causing infinite loops?"

🚫 Banned workaround

• Disabling react-hooks/exhaustive-deps to “make it work”. This is a correctness bug waiting to happen. Refactor the code instead.

The "You Don't Need useEffect" checklist

When reviewing .tsx files, check each useEffect against:

• Derived state? → Delete effect, compute inline
• Data fetch? → Move to Server Component
• Mutation? → Convert to Server Action
• Event response? → Move to event handler
• Subscription? → Use useSyncExternalStore
• Optimistic update? → Use useOptimistic
• Delayed/throttled? → Use useDeferredValue or useTransition
• DOM manipulation? → Use ref callback
• One-time init? → Use lazy initializer
• External sync? → OK, but extract to custom hook

Modern React 19 patterns to promote

Forms

// Server Action + useActionState
const [state, formAction, isPending] = useActionState(
  createInvoice,
  initialState
);

<form action={formAction}>
  <Input name="clientId" />
  {state.error && <p className="text-destructive">{state.error}</p>}
  <Button disabled={isPending}>
    {isPending ? "Creating..." : "Create Invoice"}
  </Button>
</form>;

Optimistic lists

const [optimisticItems, addOptimistic] = useOptimistic(
  items,
  (state, newItem: Item) => [...state, { ...newItem, pending: true }]
);

async function handleAdd(formData: FormData) {
  const newItem = Object.fromEntries(formData);
  addOptimistic(newItem as Item);
  await addItem(formData); // Server Action
}

Async data in client (when necessary)

// Use the `use` hook with Suspense
function ClientData({ dataPromise }: { dataPromise: Promise<Data> }) {
  const data = use(dataPromise); // Suspends until resolved
  return <div>{data.name}</div>;
}

// Wrapped in Suspense by parent
<Suspense fallback={<Skeleton />}>
  <ClientData dataPromise={fetchData()} />
</Suspense>;

Review output format

When reviewing React components, report:

## 🎯 useEffect Audit

**File**: `components/example.tsx`
**useEffect count**: 3 (Target: 0)

### 🚨 Must eliminate

- **Line 24**: `useEffect` fetching user data
  - **Problem**: Data fetching in client component
  - **Fix**: Move to parent Server Component, pass as prop

### ⚠️ Should eliminate

- **Line 45**: `useEffect` computing `fullName` from `firstName` + `lastName`
  - **Problem**: Derived state stored in useState
  - **Fix**: `const fullName = \`${firstName} ${lastName}\``

### ✅ Acceptable (with notes)

- **Line 67**: `useEffect` for D3 chart initialization
  - **Note**: External library integration. Extract to `useD3Chart` hook.

Quick reference: What to use instead

You're doing...	Don't use	Use instead
Data fetching	useEffect + fetch	Server Component
Form submission	useEffect + fetch POST	Server Action
Derived values	useEffect + setState	Compute inline
Event side effects	useEffect watching state	Event handler
Subscriptions	useEffect + subscribe	useSyncExternalStore
Optimistic UI	useEffect + temp state	useOptimistic
Delayed updates	useEffect + debounce	useDeferredValue
Pending states	useEffect + loading flag	useTransition
Focus/scroll	useEffect + ref	Ref callback
Initialize from storage	useEffect + setState	Lazy initializer

References

• You Might Not Need an Effect — Official React docs
• Separating Events from Effects
• Removing Effect Dependencies
• Components and Hooks must be pure
• useEffectEvent
• Rules of Hooks
• RSC: 'use client'
• RSC: 'use server'
• React 19 docs: use(), useOptimistic, useActionState, useFormStatus
• Project instructions: .github/instructions/react.instructions.md