I am following a tutorial on React using create-react-app. The application is created by create-react-app v1.3.0
create-react-app my-app
The dev server is run by
npm start
After changing the code several times, the browser is not updated live / hot reload with the changes. Refreshing the browser does not help. Only stopping the dev server and starting it over again capture the new changes to the code.
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!
To refresh a page, you need to use the javascript window. location. reload() in React apps.
I was reading a lot of unnecesary stuff.
I am using React 17.
And my probrem was that the page just add new components but the browser was not refreshing the page.
If your terminal is Compiling...
and then you don't see changes on the browser, you should try adding a .env
file in the root path of the project and add FAST_REFRESH=false
.
Hot refresh was replaced for Fast refresh by default.
Have you seen the “Troubleshooting” section of the User Guide?
It describes a few common causes of this problem:
When you save a file while
npm start
is running, the browser should refresh with the updated code.If this doesn’t happen, try one of the following workarounds:
- If your project is in a Dropbox folder, try moving it out.
- If the watcher doesn’t see a file called
index.js
and you’re referencing it by the folder name, you need to restart the watcher due to a Webpack bug.- Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in “Disabling swap files creation in vim”.
- If your project path contains parentheses, try moving the project to a path without them. This is caused by a Webpack watcher bug.
- On Linux and macOS, you might need to tweak system settings to allow more watchers.
- If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an
.env
file in your project directory if it doesn’t exist, and addCHOKIDAR_USEPOLLING=true
to it. This ensures that the next time you runnpm start
, the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
I hope this helps!
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