I use React with Snowpack and the react-refresh plugin.
After a change, the snowpack dev server recompiles correctly and the browser receives an HMR update signal - but the content is not reloaded, the changes are only visible after manual reloading of the page.
I have tested with Firefox, Chrome and Brave.
According to the documentation you don't have to configure anything else than to include the plugin.
Does anyone have an idea?
Would be very grateful!
Is your state management mobx?
If mobx is used, the component is optimized for memory by the observer, so the mobx state management must be updated to render.
In other words, the observer() has to React.memo applied, and it is rendered again only when a state change occurs.
So if you use useObserver(() => {}) it will work
Related
The react developer tool used to show why a component was rendered, e.g. due to state change, context update or because of a rerender of the parent.
This information can not be found in the flamegraph anymore.
Did they remove it or are there some prerequisites in order for this information to be included?
I found the solution by pure chance today. There is a checkbox hidden in the settings on the profiler page which can be toggled to enable this setting..
Can you See State variables in Production or are they private in the class and not viewable from outside?
According to the answer of this question: Disable chrome react DevTools for production you are able to disable the use of the react dev tools on your production site, however this would not absolutely stop the user from reading the state as they could always find & disable that line of code, or find some other way of accessing the state.
React runs entirely inside the user's browser, and because of this it is not possible to completely prevent the user from accessing the source code, or things like the state.
To view state, you will need to install React's Devtool
Then open your developer tool then switch to the component tab:
Find and click to your component that has a state, then you will see your state also your props on the right side:
You can use react devtools to inspect state and props of a component.
Yes, you can check them via something like React dev tools.
I have a react/redux app and when file changes and I hit save it refreshes the page and clears
all redux data.I know t that I can persist redux data to localstorage. What I would love to know
is that is it the default behaviour of react/node server to refresh the page when file changes? If not how can I prevent it?
Is it a default behaviour? : YES, it is.
This is known as live-reloading where a change in your file refreshes your local server and restarts the app setting all state to initial ones.
But the problem as you mentioned is that the state of the app is lost.
There is another concept called hot-reloading which prevents it. Hot reloading will just replace the modules which have changed while the app is running. This won't cause a total refresh of the app. It will just update the page with the changes without a reload, and so will maintain the state of the app. However, the state of the component,i.e, the react state isn't maintained.
Now, when you create a react project using CRA, the hot reload feature is built in. You can try it by running your app and changing some css. You will notice that the app doesn't refresh but the changes are applied!!
However, if you try doing this in a JSX file, the entire app changes. This is because there are some changes that needs to be done to enable hot reloading in a JSX file.
Go to the index.js and write this line of code:
if (module.hot && process.env.NODE_ENV !== 'production') {
module.hot.accept();
}
If you go and make a change to your JSX file now, you will see that the updates are applied without refresh.
BUT, the react state aren't maintained. There is a library called the react-hot-loader, which can help you in maintaining the react state too.Try it out!
I'm using a custom tool similar to react-snap to create a snapshot of my app at build time, as recommended in the create-react-app docs. This generates a static server-rendered version, which I can deploy behind nginx without running react on the server. This works fine.
I'm also using code-splitting to lazily load some components to reduce the initial JS payload. (I use react-loadable, but I'm willing to change that if needed.) It works fine when creating the snapshot, and the HTML is generated correctly, which the user receives correctly, and everything is displayed fully server-rendered without even downloading any JS yet. This is great.
However, during rehydration on the client, the import(...) call for the async loaded component hasn't yet been fired. Meanwhile, the DOM already has the stuff that has to be rendered, from the snapshot.
In this scenario, is there a way to prevent the initial render of a component during mounting, since I already have the content in the DOM?
Also, is it possible to have react's hydration logic run after the import is complete, so that I can prevent any flicker even after the import is complete?
If it matters, the lazy-loaded components are infrequently used routes, managed by react-router.
I have started developing an app using Flux and react-router. One of my components populates using state obtained from a Flux store. This works fine. However when I navigate away from this component using react-router and then back again I get the above error. If I refresh the page the error goes away and the page works fine.
From my understanding of this it seems that react-router is not remounting this component so that it is trying to change the state of an unmounted component, hence the error.
If this is correct how do I get react-router to remount the component?
PS. The code for this is too long to post here It was posted on Github but since the problem has been solved now the post has been removed.
Update (thanks Sean):
The app can be run using the dist folder, just copy this folder to a webserver and point a browser to the folder (I am using xampp locally). The problem is on the week page (component TableWeekly runs this table). The problem occurs using the dropdown to change the view of lecturers. Works fine when first loaded or after a refresh but fails when you navigate to another page and back again.
Your problem is that you subscribe to change events in componentDidMount, but never unsubscribe on componentWillUnmount. In other words, every time a TableWeekly component is mounted, a new event handler is attached but never detached when that component unmounts.
When MainStore emits a change event, it will call the _onChange event handler on an unmounted component, which in turn will try to update state and produce an invariant error.
To fix this, add the following componentWillUnmount method to your TableWeekly and DropdownWeekly
componentWillUnmount: function() {
MainStore.removeChangeListener(this._onChange);
}