HomeCasa Prompts

Diagnose and fix slow re-renders in React

Find out why a React component is slow, measure it with the Profiler and apply the right fixes (state colocation, memo, virtualization, transitions) with before-and-after code. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 4 customizable variables and you can copy it for free in one click.

Advanced · Code · Pending editorial review

Designed for:

Prompt

Act as a React performance specialist who diagnoses before optimizing.

Context:
- Code involved: {{code}}
- Observed symptom: {{symptom}}
- Measurement data (if any): {{measurements}}
- React version: {{react_version}}

If the code is not enough to see where props or state come from, ask me for the parent components or context before proposing changes.

Deliverables:
1. Hypotheses ranked by likelihood for the excess re-renders or work (state lifted too high, a context value that changes every render, new objects or functions on each render, long unvirtualized lists, expensive calculations during render, unstable keys).
2. How to confirm each hypothesis with the React DevTools Profiler (what to record, what to look for in the flamegraph and in "why did this render") and, where useful, with the browser's Performance panel.
3. The fixes, from least to most complex: move state down, pass content as children, split the context, useMemo/useCallback/memo only where measurement justifies it, useDeferredValue or useTransition for text inputs, list virtualization.
4. Before-and-after code for each applied change, explaining the expected effect.
5. How to verify the improvement with the same measurement and what threshold counts as good enough.
6. What not to do: wrap everything in memo, optimize without measuring, or hurt readability for tiny gains.

Constraints:
- Do not invent timings or percentage gains; if I have no measurements, explain how to get them and leave [FILL IN].
- If the version uses React Compiler, remember it already memoizes automatically and adjust the advice.
- Keep functional behavior identical.

Output format: diagnosis, measurement plan, changes with code blocks and a final verification checklist.

How to use it

  1. Paste the slow component and its direct parents. 2. Describe the symptom precisely (which action, how long, on what device). 3. Record a Profiler session, paste what you see and apply changes one at a time, measuring each.

Usage example

Code: OrdersTable.tsx with 2,000 rows and a text filter · Symptom: typing in the filter lags on a mid-range laptop · Measurements: none yet · Version: React 18.

Sample output

Hypotheses (most to least likely)

  1. Every keystroke filters all 2,000 rows and re-renders them in the same urgent render.
  2. Rows aren't memoized and receive new objects on every render.
  3. No virtualization: the DOM holds all 2,000 rows.

Measure first

In React DevTools → Profiler, record while typing 5 letters. Look for long commits in OrdersTable and enable "Record why each component rendered". Commit time before the change: [FILL IN].

Change 1: decouple typing from filtering

import { memo, useDeferredValue, useMemo, useState } from 'react';

export function OrdersTable({ orders }: { orders: Order[] }) {
  const [filter, setFilter] = useState('');
  const deferredFilter = useDeferredValue(filter);
  const visible = useMemo(
    () => orders.filter((o) => o.customer.toLowerCase().includes(deferredFilter.toLowerCase())), // [FILL IN: real field]
    [orders, deferredFilter],
  );
  return (
    <>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} aria-label="Filter orders" />
      <Rows orders={visible} />
    </>
  );
}

const Rows = memo(function Rows({ orders }: { orders: Order[] }) {
  return <table><tbody>{orders.map((o) => <OrderRow key={o.id} order={o} />)}</tbody></table>;
});

The input updates immediately while the list recalculates at lower priority; memo skips re-rendering rows while the deferred value is unchanged. If it's still slow, virtualization is the next step…

Key facts

Category
Programming & development · React
Output type
Code
Level
Advanced
Designed for
ChatGPT, Claude, Gemini and Microsoft Copilot
Verified in
Pending editorial verification
Variables
Code involved, Symptom, Measurement data and React version
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

Should I add useMemo and useCallback everywhere?

No. They have their own cost and make code harder to read. Use them when the Profiler shows a specific calculation or re-render is expensive, or when a stable reference is needed for memo to work.

When do I need to virtualize a list?

When hundreds or thousands of complex items render at once and the Profiler or Performance panel shows the cost comes from mounting those nodes. Short lists rarely need it.

What is this prompt for?

Find out why a React component is slow, measure it with the Profiler and apply the right fixes (state colocation, memo, virtualization, transitions) with before-and-after code.

Which AI tools does it work with?

It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (Code involved, Symptom, Measurement data and React version). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

It is advanced: it is meant for people with experience in the topic who can evaluate and adjust the result.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts