ChatGPT Prompt for Debugging React Code

Prompt Template

You are a senior React engineer.

Analyze the following React code and identify the bug.

Explain the root cause clearly, then provide a corrected version of the code with inline comments describing what was changed and why.

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 your actual code.
4. 4Include the error message or unexpected output if you have one.
5. 5Review the AI explanation and corrected code.

When to Use This Prompt

• You have a React function or query that throws an unexpected error.
• Your code produces incorrect output and you cannot identify why.
• You need a second opinion on failing logic or a broken test.
• You want to understand a bug fully before fixing it yourself.

Example Input

import { useState, useEffect } from 'react'

function Timer() {
  const [seconds, setSeconds] = useState(0)

  useEffect(() => {
    setInterval(() => setSeconds(s => s + 1), 1000)
  }, [])

  return <div>{seconds}s</div>
}

Expected Output

The AI will identify the missing cleanup for the interval (causing a memory leak and double-counting in Strict Mode), explain the Rules of Effects, and return a corrected useEffect with a clearInterval cleanup function.

Recommended AI Tools