Hello there,
My react code is not reloading as it is supposed to. I save the file, and it doesn’t reload, and that is the whole point of react, that it reloads on it’s own. i’m scared of the fact that when i will publish a website or make an app with react, then it won’t work and reload on it’s own.
Information about what i use for react
Code Editor: VScode
Browser: Chrome (latest-version)
Server to see react output: Localhost:3000
Please tell me why when i save the react file, the page doesn’t reload itself and i have to always press reload.
Any help would be appreciated. 
I think that is what React is, I code with React too. Sometimes after I changed some code I still need to press reload manually. Sometimes it does occur automatically.
Tips on VS Code: You can enable autosave, so when any change any code in your codebase, VS Code will automatically do it for you and you don’t need to do it manually everytime.
1 Like
I’m not entirely sure what you mean about expecting React to ‘reload’ on it’s own… it sounds like you might be mixing up two different concepts?
- When in development, when you make changes in your code, you want to be able to see that update in browser on your localhost in almost real time to help with writing the code. To achieve this:
- run
npm start in the terminal from the project’s root, which (if react has been installed properly with the necessary dependencies) will open the app in your browser - usually at localhost:3000.
- when you make (and save) minor changes, these will automatically update in the browser and be almost immediate
- when you make a bigger change in your code, you may have to refresh the browser or restart the server (stop the server and re-reun the
npm start command). This is typical, and to be expected.
- When in ‘production’, the fully working website is deployed to an external server/host.
- A user interacts with the app through their own browser/client.
- When the state of a react component changes (for example, a user clicks on a button, types into an input field, or you have a component displaying the time etc) the relevant components rerender as needed.
- What is considered ‘the point’ of react is that it only re-renders the components that have had a state change, rather than re-rendering the whole webpage every time one little thing changes. This makes for a more efficient webapp.
- A component will only re-render if it has been coded to do so… if there is state attached to it, which has changed. It may depend which stage of the mounting lifecycle the component has been written to, if event handlers have been used and correctly applied, if setState or useState methods are used and triggered, if it has input fields, or is pulling in changing data from an API, etc.
4 Likes
no i mean that react reloads on its own some teacher in an online course on youtube mentioned that it will reload on it’s own since it’s react and he showed, but in my case react isn’t reloading on it’s own
I’m afraid you’ll l have to explain your problem in more detail, and share your code, so we can understand what is happening and how to help you. Tips from the Community Guidelines:
✓ Do format your code before posting.
- Do make sure you post your question in the right category.
- Do make sure you put the instructions, error and link to the exercise you are stuck on in your post.
- Do make sure you put the exercise number in the post title.
- Do ask for help if you need it!
✘ Don’t ask for help on an exercise without posting code.
i had explained my problem. Or i have a misunderstanding that react doesn’t reload on it’s own?
What i’m trying to say is, that i went into a video course on yt and there the guy said that react has a cool feature that when you save the file, it will reload on it’s own. still when i save the file, react doesn’t reload on it’s own. I have explained it properly. When i save the file, react isn’t reloading on it’s own that it’s supposed to. and it’s not only for the first time, it always has been
As this does not pertain directly to codecademy content, you’re better off googling your problem.
Here’s a stackoverflow discussion on the topic with a number of potential solutions javascript - Development server of create-react-app does not auto refresh - Stack Overflow
I am having same problem, looking for solution.
when I change something in css file, react update UI like as usual, but when I change something logical in js file, it is not being updated in localhost i.e. change of eventhandler.
React state should update automatically that’s its purpose, unfortunately there can be several different issues so debug as much as possible!
I am currently experiencing the same problem. I noticed it might be from the laptop you are using to code react.js I will advise you to use a different laptop. I am yet to look for a solution to solve that problem.
Hi I’m replying to maybe help others that may have been seaching for a solution to this same problem since there doesn’t seem to be any relevant info on any forum. If you’re using WSL dont save the project on Windows, save it instead somewhere in Linux, that fixed it for me, hope it helps
That is because in you App.js you have not imported or you removed React.
Try to paste this line at the top of your App.js
import React from “react”;