React Debugging

Essential debugging techniques for React.

React DevTools

Install browser extension:

• Chrome/Edge: React Developer Tools
• Firefox: React DevTools

Features:

• Inspect component tree
• View props/state
• Edit values live
• Track renders

Console Methods

// Log state changes
useEffect(() => {
  console.log('Count changed:', count);
}, [count]);

// Debug object
console.table(users);

// Group logs
console.group('User Details');
console.log('Name:', user.name);
console.log('Age:', user.age);
console.groupEnd();

Debugging useEffect

useEffect(() => {
  console.log('Effect ran');
  return () => console.log('Cleanup');
}, [dependency]);

Error Boundaries

componentDidCatch(error, info) {
  console.error('Error:', error);
  console.error('Info:', info);
}

Performance Profiling

Use React DevTools Profiler:

• Record interactions
• See render times
• Find slow components

Remember

• Use React DevTools
• Log state changes
• Profile performance
• Use Error Boundaries

Next: Learn best practices!