Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create react app, reload not working

Tags:

I just started coding in React using create-react-app. In the documentation it's said

The page will reload if you make edits.

I don't know which module is responsible for auto reload (webpack or react-hot-reloader?) but it's not working. I edited file using different editors (Sublime, VIM, ..) but it seems problem is for something else. Any advice how to debug it?

like image 514
Ali Avatar asked Feb 12 '17 15:02

Ali


People also ask

How do I auto refresh in react?

If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page. import React from 'react'; function App() { function refreshPage() { window. location. reload(false); } return ( <div> <button onClick={refreshPage}>Click to reload!

What is hot reloading?

Hot reloading allows you to see the changes that you have made in the code without reloading your entire app. Whenever you make any changes, all you need to do is save your code. As soon as you save your code, React Native tracks which files have changed since your last saved, and only reload those file for you.


1 Answers

After too many searches I found Webpack watch uses inotify to observe file changes and in ubuntu it's set to a low value. a quick fix:

sudo -i echo 1048576 > /proc/sys/fs/inotify/max_user_watches exit 

If you want change it permanently (from Ronald answer):

echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf sudo sysctl -p 

You may also need to add a .env file in the root directory of your project with this line "FAST_REFRESH=false" as noted in create react app docs.

echo "FAST_REFRESH=false\n" | cat > .env 
like image 114
Ali Avatar answered Sep 18 '22 15:09

Ali