How do you use React DevTools for debugging and performance optimization?

How do you use React DevTools for debugging and performance optimization?

React DevTools is an essential browser extension for debugging React applications.

Installation and Setup:

// Install via browser extension store
// Chrome: React Developer Tools
// Firefox: React Developer Tools

// For development, you can also use the standalone version
npm install -g react-devtools
react-devtools

Component Inspection:

// Components tab shows the component tree
function App() {
  const [count, setCount] = useState(0);
  const [users, setUsers] = useState([]);
  
  return (
    <div>
      <Counter count={count} onIncrement={() => setCount(c => c + 1)} />
      <UserList users={users} />
    </div>
  );
}

// In DevTools:
// - Inspect component props and state
// - Edit props/state in real-time
// - View component hierarchy
// - Check component render count

Profiler Usage:

import { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  console.log('Component:', id);
  console.log('Phase:', phase); // mount or update
  console.log('Actual duration:', actualDuration);
  console.log('Base duration:', baseDuration);
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <ExpensiveComponent />
    </Profiler>
  );
}

// Profiler tab in DevTools:
// - Record performance sessions
// - Identify slow components
// - Analyze render times
// - Find unnecessary re-renders

Debugging Techniques:

// 1. Component state debugging
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchUser(userId).then(userData => {
      setUser(userData);
      setLoading(false);
    });
  }, [userId]);
  
  // DevTools shows state changes in real-time
  return loading ? <div>Loading...</div> : <div>{user.name}</div>;
}

// 2. Props debugging
function Button({ onClick, children, disabled, ...props }) {
  // DevTools shows all props including spread props
  return (
    <button onClick={onClick} disabled={disabled} {...props}>
      {children}
    </button>
  );
}

// 3. Context debugging
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  // DevTools shows context value and consumers
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

Performance Optimization:

// 1. Identify unnecessary re-renders
function ExpensiveComponent({ data, filter }) {
  // DevTools Profiler shows this re-renders on every parent update
  const processedData = useMemo(() => {
    return data.filter(item => item.category === filter);
  }, [data, filter]);
  
  return <div>{processedData.length} items</div>;
}

// 2. Debug memoization issues
const MemoizedComponent = React.memo(function MyComponent({ name, age }) {
  return <div>{name} is {age} years old</div>;
});

// DevTools shows when memoization works/fails
function Parent() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: 'John', age: 30 });
  
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <MemoizedComponent name={user.name} age={user.age} />
    </div>
  );
}