'Running react app in browser issues with saving and editing
When I run my react app in the browser, everything works fine. But when I edit a file and it gets saved, I can still see the whole app but when I try to interact with it, it doesnt work, I did inspect element and saw that the body that does not contain anything. Yet the content is visible? Any solutions?
Note , when I reload the page everything is working fine, but its annoying to have to reload the page everytime.
Solution 1:[1]
Next JS is based on Reactjs and this might be helpful for you:
Fast Refresh tries to preserve local React state in the component you're editing, but only if it's safe to do so. Here's a few reasons why you might see local state being reset on every edit to a file:
Local state is not preserved for class components (only function components and Hooks preserve state). The file you're editing might have other exports in addition to a React component. Sometimes, a file would export the result of calling a higher-order component like HOC(WrappedComponent). If the returned component is a class, its state will be reset. Anonymous arrow functions like export default () => ; cause Fast Refresh to not preserve local component state. For large codebases you can use our name-default-component codemod.
As more of your codebase moves to function components and Hooks, you can expect state to be preserved in more cases.
You can read more about FastRefresh from the documentation.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Mohammad Tbeishat |