React Debugging Tips for Every Developer

React Debugging Tips for Every Developer

React applications can be hard to debug without the right techniques. Here are the tools and methods that save hours.

React DevTools Profiler

The Profiler tab in React DevTools shows exactly why components re-render:

1. Open React DevTools → Profiler tab
2. Click "Record"
3. Interact with your app
4. Stop recording
5. Inspect the flame chart — yellow/red components are slow

Each render shows whether it was triggered by state change, props change, or parent re-render.

Track Unnecessary Re-renders

import { useRef, useEffect } from 'react';

function useWhyDidUpdate(name, props) {
  const prevProps = useRef(props);

  useEffect(() => {
    const changes = {};
    for (const key in props) {
      if (prevProps.current[key] !== props[key]) {
        changes[key] = { from: prevProps.current[key], to: props[key] };
      }
    }
    if (Object.keys(changes).length) {
      console.log(`[${name}] changed:`, changes);
    }
    prevProps.current = props;
  });
}

// Usage
function UserCard(props) {
  useWhyDidUpdate('UserCard', props);
  return <div>{props.name}</div>;
}

Debug State Issues

For complex state, add a logger to your reducer:

function useReducerWithLog(reducer, initialState) {
  return useReducer((state, action) => {
    const next = reducer(state, action);
    console.group(action.type);
    console.log('prev:', state);
    console.log('action:', action);
    console.log('next:', next);
    console.groupEnd();
    return next;
  }, initialState);
}

Error Boundaries

class ErrorBoundary extends React.Component {
  state = { error: null };

  static getDerivedStateFromError(error) {
    return { error };
  }

  componentDidCatch(error, info) {
    console.error('React error:', error, info.componentStack);
  }

  render() {
    if (this.state.error) {
      return <FallbackUI error={this.state.error} />;
    }
    return this.props.children;
  }
}

Common Pitfalls

• Stale closures — useCallback/useEffect missing dependencies
• Object identity — {{}} creates new object every render
• Key prop misuse — using array index as key causes state bugs

For production React apps, Bugsly captures component stack traces so you can see exactly which component tree led to an error, making debugging significantly faster.