Q196- How do you debug React applications?

React provides multiple ways and tools to find, understand, and fix bugs — from browser devtools to specialized React debugging extensions.

Let’s break it down 👇

---

🧠 1. Use Browser Developer Tools (Console & Sources)

The first line of debugging:

• Open Chrome DevTools → Console tab.
• Look for errors, warnings, or stack traces.
• Use console.log() or console.table() to inspect variables and props.

Example:

function UserProfile({ user }) {
  console.log("User data:", user); // Inspect data
  return <h1>{user.name}</h1>;
}

✅ Tip:

Use console.warn() or console.error() to highlight important logs.

---

🔍 2. Use React Developer Tools Extension

Install the React Developer Tools browser extension (available for Chrome and Firefox).

It adds two tabs:

• 🧩 Components → Inspect React components, props, and state.
• ⚙️ Profiler → Measure rendering performance.

You can:

• See live state/props of any component.
• Check which components re-render on updates.
• Debug state flow without modifying code.

---

🧭 3. Use Breakpoints in Source Code

You can pause execution at specific points:

function calculateTotal(items) {
  debugger; // Pauses code here
  return items.reduce((sum, i) => sum + i.price, 0);
}

or set breakpoints directly in DevTools → Sources tab.

This lets you inspect the call stack, variable values, and flow step-by-step.

---

🧪 4. Check Component Rerenders

Use React.memo and custom hooks like this to detect unnecessary renders:

import { useEffect } from "react";

function useRenderTracker(name) {
  useEffect(() => {
    console.log(`${name} rendered`);
  });
}

Then:

function Profile() {
  useRenderTracker("Profile");
  return <div>Profile page</div>;
}

Useful for optimizing performance and catching unwanted re-renders.

---

⚙️ 5. Debug with Error Boundaries

If a component crashes due to a runtime error, use Error Boundaries to catch and log it gracefully.

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    console.error("Error caught:", error, info);
  }
  render() {
    return this.props.children;
  }
}

---

🧾 6. Use Source Maps (for bundled code)

When using bundlers (like Webpack or Vite), ensure source maps are enabled:

// webpack.config.js
devtool: "source-map"

This lets you trace errors in the browser console back to your original source files (not minified code).

---

🧱 7. Network & API Debugging

Use the Network tab in DevTools to:

• Check if API requests succeed.
• Inspect headers, payloads, and responses.
• Verify API errors or incorrect endpoints.

Also use libraries like:

• axios.interceptors for logging requests/responses.
• MSW (Mock Service Worker) for mocking APIs during tests.

---

🚀 8. Debug with useEffect and Dependency Warnings

React often warns:

React Hook useEffect has missing dependencies

These warnings help find state or effect bugs (like infinite loops or missing dependencies).

Always pay attention to them — they’re not noise!

---

🧩 9. Use Profiler for Performance Debugging

In React DevTools → Profiler tab, you can record interactions to see:

• Which components rendered.
• How long each render took.
• What caused a re-render.

Helps track performance bottlenecks.

---

🛠 10. Use Dedicated Debugging Libraries

Library	Purpose
why-did-you-render	Detect unnecessary re-renders
React Profiler API	Analyze performance programmatically
Redux DevTools	Inspect Redux state changes over time
LogRocket / Sentry	Record real user sessions and errors

---

✅ Summary

Debugging Tool	Use For
Console / debugger	Inspect values and flow
React DevTools	View props, state, tree, performance
Breakpoints	Step through code execution
Network tab	Inspect API requests
Error Boundaries	Catch component errors
Profiler	Diagnose performance issues
why-did-you-render	Detect wasted renders

---

In short:

React apps are debugged using DevTools (browser + React), console debugging, breakpoints, profilers, and error boundaries, focusing on finding logic errors, render inefficiencies, and API issues.