I was in my interview phase, In one my interview the interviewer asked me "Why our app gets slow in debug mode ?". I didn't have any answer to that question then. So I said "To be honest I don't know, I have gone through this situation but I never explore the reason behind it"

Always explore the why part behind each basic things while learning.

So after the interview I started to search on google the reason behind it. And this is what I have came to know.

The Problem

When we use Debug JS Mode while developing React Native app, App gets very slow, JS Frame rate gets dropped.

Each button click and transition takes almost a couple of seconds and sometimes even more. With all this, debugging application feels like working windows vista.

What happens when We turn on Debug Mode

When we switch on Debug mode then instead of running JavaScript code in your Phone or Simulator it runs in chrome or debugger your are using on your computer. And that's why the interaction with app gets slow.

For example you click on a button then that event gets register in app then it gets send to the debugger or chrome. So this process makes the app slow.

When you use Hermes in a production build, the bytecode is compiled in advance and can be executed quickly.

Reference from A thread -- When you use Hermes locally with Metro, Hermes is running in a lazy compilation mode. This is faster than compiling all the bytecode every time you reload from Metro, but slower than a production build. So slowness in dev mode does not necessarily means slowness in release mode. If Metro were able to compile bytecode one module at a time and deliver it incrementally to the device, this would probably help.

What can we do to fix this ?

From above section we came to know that If we switch on the debug mode the app tend to run slow. But there can be some extra factor which can make the app very slow in debug mode. So for that we can try following solutions

• Remove excess amount of console logs
• Check the time clocks on your phone and your computer. They should match or you can keep the phone's clock to a few seconds ahead of the computer.
• Instead of chrome debugger use React Native Debugger.
• Deactivate the "Slow animation" option in the debug menu.
• Always try to resolve warnings if there are any.
• Try solutions from this issue

Even after trying above solution if your app is running slow then you should check another app in debug mode if that one is working fine then in your first application there can be problem in code , maybe re-rendering of components happening.

I hope this blog help anyone out there.

If you want to read more Do visit my website and Don't forget to subscribe to blog you will get update whenever I upload a new one. Cheers. Cheers.