Debugging in React Apps

Debugging in React Apps

• Console logging: The simplest way to debug is using console.log() to inspect variables and component state.
• Error boundaries: Wrap components to catch runtime errors without crashing the whole app.
• Debugging tools: Use Chrome DevTools, VS Code debugger, or external monitoring tools like Sentry.

Understanding React Error Messages

Common errors:

• “Objects are not valid as a React child”: You tried rendering a plain object instead of JSX or string.
• “Invalid hook call”: Hooks must be used inside functional components, not conditionally.
• “Each child in a list should have a unique key”: Missing key prop in lists

Using Browser Debugger and Breakpoints

• Chrome DevTools:

Open with F12 or Ctrl+Shift+I.

Go to the Sources tab → set breakpoints in your React code.

• VS Code Debugging:

Configure launch.json to attach debugger to Chrome.

Get OMKAR SUNIL SHIVARKAR’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Use conditional breakpoints to pause only when certain conditions are met.

Understanding React Strict Mode

• Purpose: Helps identify potential problems in an application by running extra checks in development.
• Effects:

Detects unsafe lifecycle methods.

Warns about deprecated APIs.

Double-invokes certain functions to highlight side effects.

• Usage:

Using React DevTools

• Features:

Inspect component hierarchy.

View props and state of each component.

Track performance and re-renders.

• Installation: Available as a Chrome/Firefox extension.
• Usage:

Open DevTools → React tab.

Select a component to see its props/state.