Fix React Auto-Reload Not working

Hello there. If you use a Unix based Operating System then you’ve probably noticed that as your project gets bigger React does a poor job at keeping track of file changes as you go. I faced this issue for a while and pain-stakingly resorted to restarting the dev-server severally to monitor my changes and even restart my IDE sometimes. Most people would simply do an npm eject and move on with their lives setting up everything manually without the help of react-scripts. I didn’t want to go down this path just yet.

Head strong on finding a solution, I did a lot of digging and stumbled upon good news! The file watcher that is bundled with react-scripts implements the Unix inotify module. After discovering this, fixing the issue was as easy as pie!!

By default inotify performs about 8192 watches per instance. In react, considering the large number of dependencies and extra files, this is a measly number and will easily be exceeded as soon as the project starts to grow bigger. You can check your number of watches per instance using the following command:

The key is simply increasing this number which would implicitly mean changing the content of the file max_user_watches. By running the following commands we can get that done (don’t forget root privileges):

And problem fixed. React works perfectly now. So that’s it! we simply run those commands after restarting our computer or just before we start our dev-server.

For added comfort you can package it up in a script like below:

And we’re done. simply make the script executable and run it:

That’s all for this session. Now face your bugs more confidently!!!

WARNING: Note that the reason inotify sets the watches per instance so low is to reduce the usage of kernel memory. Don’t set this value to be too high unless you know what you are doing…