ChatGPT Prompt for Optimizing React Code

Prompt Template

You are a senior React engineer specialising in performance optimization.

Analyze the following React code for performance issues.

Provide:
1. Unnecessary re-renders and missing memoisation.
2. Expensive calculations that should be memoised with useMemo.
3. Callback stability with useCallback.
4. Bundle size and code-splitting opportunities.

For each suggestion, explain the expected performance impact.

Code:
[PASTE CODE HERE]

How to Use This Prompt

1. 1Copy the prompt template above.
2. 2Paste it into ChatGPT at chat.openai.com.
3. 3Replace [PASTE CODE HERE] with the React code you want to optimize.
4. 4Optionally describe the scale of data or the performance target you need to hit.
5. 5Review each suggestion and apply the ones relevant to your context.

When to Use This Prompt

• Your React code is running slower than expected.
• Profiling shows a hot path that needs improvement.
• You are scaling up and need to handle larger data volumes.
• A performance review flagged inefficient patterns in your code.

Example Input

function ProductList({ products, search }) {
  const filtered = products.filter(p =>
    p.name.toLowerCase().includes(search.toLowerCase())
  )
  return (
    <ul>
      {filtered.map(p => (
        <ProductRow key={p.id} product={p} onClick={() => addToCart(p)} />
      ))}
    </ul>
  )
}

Expected Output

The AI will identify the missing useMemo for the filtered list (recalculated on every render), the unstable onClick callback causing ProductRow re-renders, and suggest wrapping with useMemo and useCallback, and adding React.memo to ProductRow.

Recommended AI Tools