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

// 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

// 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

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

// 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>
  );
}

// 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>
  );
}