How to Debug React Props

Debugging props in React is a fundamental skill for diagnosing data flow issues and ensuring your components render with the correct information. This article provides a straightforward guide on how to inspect, track, and debug React props using modern tools and techniques, including React Developer Tools, strategic console logging, browser breakpoints, and prop validation.

Use React Developer Tools

The most efficient way to inspect props is by using the official React Developer Tools extension, available for Chrome, Firefox, and Edge.

Once installed: 1. Open your browser’s Developer Tools (F12) and navigate to the Components tab. 2. Select any component in the tree on the left. 3. View the Props panel on the right side. This panel shows the current values of all props passed to that component. 4. You can also edit prop values directly in the panel to see how the UI responds in real-time.

Log Props to the Console

When you need to track how props change over time during user interactions, console logging is highly effective.

Basic Logging

Place a console.log directly inside your functional component before the return statement:

function UserProfile(props) {
  console.log('UserProfile Props:', props);
  return <div>{props.name}</div>;
}

Table Logging for Objects

If your props object contains multiple key-value pairs, use console.table to display them in a clean, readable grid:

function ProductList({ items, category }) {
  console.table({ items, category });
  return <div />;
}

Utilize the debugger Statement

Instead of cluttering your code with console logs, you can pause JavaScript execution using the debugger keyword.

function Cart({ items }) {
  debugger; // Browser execution will pause here if DevTools is open
  return <div>{items.length} items</div>;
}

When the browser pauses execution at the debugger line, open the Sources tab in your browser’s developer tools. You can hover over items to inspect its contents or look at the Scope window to see the exact state of all props at that specific moment in the component’s lifecycle.

Detect Unnecessary Rerenders

Sometimes props contain the correct data, but they change too frequently, causing performance bottlenecks. You can track why a component rerendered using the Profiler tab in React Developer Tools:

  1. Open the Profiler tab.
  2. Click the Record button, interact with your app, and click Stop.
  3. Select a render event. The tool will explicitly state which props changed to trigger that specific rerender.

Implement TypeScript or PropTypes

Preventing prop bugs before they happen is often easier than debugging them. Use TypeScript or the prop-types library to enforce type checking.

Using TypeScript:

interface UserProps {
  id: number;
  username: string;
  isActive: boolean;
}

function User({ id, username, isActive }: UserProps) {
  return <div>{username}</div>;
}

If you pass the wrong data type (e.g., a string instead of a number for id), your editor will instantly highlight the error, preventing the bug from reaching the browser.