Single page apps require careful management of events, DOM elements, and javascript objects in order to avoid leaks.
We're going to manage memory and squash leaks as best we can. That said, the application is large, uses many libraries, and could be left open for days at a time.
We need a safety valve.
I'm looking for ideas on how to unobtrusively trigger a page refresh in a single page app as a way to force the release of memory.
One idea is to detect when the user is idle for more than N minutes and do a refresh then, because it's unlikely to interrupt them. Much of the application state is saved in the URL using AngularJS ui-router, so this will work some of the time.
The problem is that while some state is in the router, not all of it will be. The user could have unsaved changes, or have some modal or flyout menu open which isn't in URL state. A solution could be to detect user changes and ban a refresh if any changes have taken place that aren't in the url. I don't see how to implement this generically though. Maybe we just put everything that's even a little bit important into URL state.
Another idea is to watch the application state change event $stateChangeStart and, every Nth time, do an actual browser navigation to that URL instead of just an app state change. This will never result in lost "sub-state", but will cause a slower page change response and a screen flicker. Maybe every 20 screen changes this is OK though.
Does anybody have any better ideas?
Just an idea on unsaved changes and data:
I have an a single page app that in one section has several tabs each containing a form. When each form becomes "dirty" it triggers a notification to the Main Controller, and sets a flag for that form. When a user saves a particular form the flag becomes unset. If the user tries to navigate away - before the route change occurs, it checks to see if any of the flags are set and then notifies the user via a modal that some particular information hasn't be saved. The user can then decide whether to continue with the route change or go back and save the data.
This could easily be modified to perform the same check on page refresh and if there is unsaved data either cancel the page refresh or save the changes to the browser's local storage for recall after the page has finished refreshing.
Related
I’m making a simple app with react-routing component.When user enter in /config path, it open a configuration page where he can choose element from select.
After this, user save data and the application set state of main component correctly (App.js). Then i make a “view change” using history to return in home (/ path).
The problem is : if user click on second time in /config routes, it lose all previous change made on DOM and it seems to be a new istance.
How i can preserve user interaction after first change? I cannot understand if i need to make a state inside this (Config.js) or there are an alternative solution.
Thanks for all
If you have an app level configuration which should be preserved between renders/navigation you should consider using some sort of a state management like Redux or you should store your config inside sessionStorage/localStorage (sessionStorage keeps track only while your browser tab is active = not closed. localStorage saves for the future when user closes and reopens your app).
Learn more about Web Storage API on how to use sessionStorage and localStorage.
NOTE: When you navigate away from your component, it gets unmounted which means that the component's state is destroyed/trashed. That's probably the situation you're facing now with your project.
You need to store the data/state/config somewhere. If it's just a few things (nothing heavy or complex), you can use localStorage (it saves the data between sessions, doesn't matter if you close tab and open it again)... But if you need to have a greater control over the app's state you should consider diving into Redux Store.
Have in mind that by default redux doesn't support data persistence so you'll need to plug-in Redux Persist package to achieve that (it's like saving in localStorage, but now the whole Redux (with all the states) will be saved between sessions)
I am not sure what you mean by
lose all previous change made on DOM
Where do you store these changes made and could you not check for this state and render the contents of the /config component or even the component itself depending on whether or not the changes to the state have been made?
I am newbie to nextjs.
I have no idea why my website will reload periodically?
I know that hot code loading is the feature of nextjs.
Next.js reloads the page when it detects any change saved to disk.
However, How can I know what is the changes which cause the page reloading?
Fast refresh is triggered in development mode for a number of reasons like when an error is fixed, a file is updated, or Next detected out of date state. When stuff is out of sync Next will reload, this sometimes occurs between saves. The link as a complete list of reasons fast refresh is triggered and more detailed explanation.
You can also manually force a page to fast refresh which is helpful when working with code that is invoked on mount.
I have not seen a way to tell what triggered the fast refresh other than an obvious error that was fixed or when a file is updated and saved.
I´m learning React (so understand the why of my question).
I created an API with AWS and the front-end is React+Redux.
To access the API data the visitor has to register. For that, it has to create an account.
Once the visitor created the account, he will receive an email with the confirmation code... Code that he was to provide on my view.
Between the creation view and process and the confirmation view (just and input where user has to enter the code and hit a button), the user can...
Stay in that page (1)
Close that tab (2)
Close the browser (3)
So, and here´s my question: Which is the proper way to NOT render the create user view once the visitor create an account and until he confirms it, in a single page app where the root page renders all the views through conditionals (local state and Redux store).
Initially, I thought in Local state. It worked just for case 1.
Then, I thought… “I can create a localStorage where the key could be user and value the user that we visitor picked. And, until he introduces the code and hit the button, and, consequently remove that item for the localStorage, avoid rendering the create view”.
However, I do want to know you considerations. I´m not a big fan of cookies. Also,
I didn´t want a Session storage since I want to be persistent.
I will appreciate any kind of suggestion.
Thanks for your time.
You can use local state take one new empty state.
Now set the state value when user introduce the code using
this.setState({}) method once you get the code in state you can check the value present in the state or not the time of click event at button. If your state has code then it should go further else you give error message or popup message to user to enter code.
I'm aware that there's componentDidMount that's called when the component is mounted, however in the case of React's Navigator it does not Unmount the root components when you move to another page. So, for example, if you wanted to refresh information when a page was loaded. How would you go about that?
For example, I'm on a News page and I tap to go to a article. I stay on the article for 15 minutes or so, during this time, new News was added. When I hit the back button and pop the current view, it pulls up the old view. (Does not remount it) How would I go about setting a trigger to reload the data.
I have some ideas for hacks, but want to know if there's a proper way to do it.
The way I've been doing it is by creating a method that would refresh the information in News, then passing it to the next scene and calling it right before the navigator.pop().
My problem is the following.
I have a component that I want to be stateful, and the state based on some ids (per user and per task basically) and this state is saved in my database.
Following some tutorials I managed to do a stateprovider that requests information through ajax requests.
Though I still have a problem since the restore event is only triggered when reloading the page, but not on task change.
Would there be anyways to trigger state change when tasks are opened.
Because the problem I have right now is if I force the restore, it happens but the task will somehow still be opened with the previous state (I guess because of the fact that the provider is asynchronous?)