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?
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!
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With