# Remove those pesky console.* statements from your React native code

I have been building React Native (RN) apps for quite some time now but I am by no means an expert and often get tripped up on what seems like silly problems. In this blog post, I am gonna run through one of these silly issues and how to solve it.

I had been told a number of times that console.* statements in your RN code would slow your app down but I had never really experienced how true this was. It is all too easy to accidentally leave that console.log statement you used to debug a component, only to forget about it later. Well, you won’t be able to forget it when it brings your app to its knees. This is exactly what happened to me recently. Leaving a debug console.log in, made parts of my app almost unusable.
I was worried. I look everywhere else for the issue not thinking a simple console.log statement could cause such problems. Once the statement was removed my app was back to its speedy self and everything was right with the world again.

I’ve found that because I split everything up into discrete components in different file, I sometimes miss stuff like this. Is that what you’ve found?

There are a number of ways to fix this issue. You could just remember to remove them before your app goes to production. But for me, remembering is hard. I have a terrible memory and when releasing software the last thing I am thinking about is console.logs.

You could add a DEV const to your config and then wrap your console.* statements in a conditional (see below for an example). This works and I have used it in the past but it is all too easy to forget to wrap the statement in the conditional. It can also take away from the readability of your code.

# config.js
export const DEV = true;
 
# your-component.js
import { DEV} from '../config';
 
 const YourComponent = () => {
   // Your code
 if(DEV) {
      console.log('Logging')
    }
  }
 
export default YourComponent;

I am all for having things automated and not having to think about removing the console.logs sounds good to me. Enter babel-plugin-transform-remove-console. This package will remove all those unwanted console.* statement automatically when your code is run through babel. To install run npm install babel-plugin-transform-remove-console in terminal in the root of your project. This will install the package. For the package to actually work you need to add the following code to your `.babelrc`. This snippet will only run this plugin in production mode as it is likely that we want to see the log statements while developing our apps.

"env": {
  "production": {
    "plugins": ["transform-remove-console"]
     }
  }

Once I added the plugin, my apps performance increased massively.

Going forward I will be paying much more attention to the impact console.log statements have on the performance of my RN apps. This will be my go-to approach for removing console.* statements. Give it a try you might be surprised at the performance improvements you get.