Bugs are inevitable in complex React applications. Thankfully, React provides great tools to squash bugs quickly.

Let’s look at some key techniques for debugging React apps:

React Developer Tools

The React DevTools Chrome extension lets you inspect React component hierarchies, props, state and more in Chrome:

1
2
3
4
5
6
7
8
9

DevTools:

<App>
  <Navbar />   
  <Profile 
    name="Jane"
    imageUrl="https://..." 
  />
</App>

This provides invaluable visibility into React apps.

Error Boundaries

Error boundaries catch errors and display fallbacks:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { Component } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function BuggyComponent() {
  throw new Error('Something went wrong!');
}

function App() {
  return (
    <ErrorBoundary
      fallback={<p>There was an error!</p>} 
    >
      <BuggyComponent />
    </ErrorBoundary>
  );
}

This prevents errors from crashing the entire app.

Warnings for Best Practices

React provides many warnings against anti-patterns like keys missing from mapped components.

Always fix warnings instead of suppressing them. The warnings highlight chances to improve code.

Logging State Changes

Log state changes to trace when and where they occur:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function Counter() {
  const [count, setCount] = useState(0);

  console.log('Count:', count);

  function increment() {
    setCount(c => c + 1);
  }

  return <button onClick={increment}>Increment</button>
}

Logging captures a trace of changes over time.

Summary

  • React DevTools to inspect components
  • Error Boundaries to gracefully handle failures
  • Warnings point out best practices
  • Log state changes to trace data flow

Mastering React debugging tools is key to squashing bugs quickly.