Cost of console.log and production-safe debugging

WHAT THIS TESTS Whether you understand that logging consumes JS-thread time and can leak data or slow release builds, and that proper debugging uses dedicated tooling.

A GOOD ANSWER COVERS Each console.log call has to convert its arguments to strings, which is costly for large objects, and when a remote debugger or dev tools are attached the call is sent across the bridge, often synchronously, so it occupies the JS thread. A single log is negligible, but logs inside render paths, scroll handlers, animation frames, or tight loops fire constantly and can drop frames. Verbose logs also bloat output and may expose sensitive data in release builds. The fix for production is to remove logs automatically with a Babel plugin such as babel-plugin-transform-remove-console in the release configuration, so they never ship. For real debugging you use the React Native dev tools and the JS debugger, Flipper for inspecting network, layout, and state, performance monitors and the in-app perf overlay for frame rates, and remote services like Sentry or Crashlytics plus an analytics tool for production error and behavior visibility rather than scattered prints.

COMMON WRONG ANSWERS Claiming console.log is free. Leaving verbose logging in production builds. Logging inside render or animation loops. Relying on prints instead of a debugger or performance profiler. Forgetting that an attached debugger amplifies the cost. Ignoring that logs can leak secrets.

LIKELY FOLLOW-UPS Why does an attached debugger make logging slower, how do you strip logs only in release, what does Flipper offer, how do you profile frame drops, and how do crash reporters differ from logging.

ONE CONCRETE EXAMPLE A developer leaves console.log of the full item object inside a FlatList renderItem. While scrolling, that log fires for every visible row on every render, each time serializing a large object and, with dev tools open, crossing the bridge, so scrolling stutters. Removing the log and instead inspecting state in Flipper, plus configuring transform-remove-console for release, restores smooth scrolling and ships a clean production build.