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?
Related
Given a use-case where there is a need for users to input data into a React application for the purposes of on-the-fly calculations. However, from a security perspective, the user-inputted data should not be persisted on the user's device, or within the React application (assume we are not explicitly saving that data anywhere from a React/backend logic perspective).
What happens to that data contained within useState hooks after the page is refreshed? Does React or the Browser store/cache any of that information at all, or is it deleted entirely?
React state exists entirely in memory. I can only exist in longer term storage, like localStorage, if it's actively persisted there.
If you reload the browser window, it effectively remounts the React app. Anything that was running previously is tossed out and started anew. The app loads and any React components will have their initial state values.
What happens to that data contained within useState hooks after the
page is refreshed? Does React or the Browser store/cache any of that
information at all, or is it deleted entirely?
It is wiped on page reload, for the reason explained above.
It just gets restored to their initial state. And nothing else happens
const [post,setPost] = useState(false)
When the page refreshes it goes back to false
In the app I am working on I have a state that is chosen in a dropdown by the user. I would like this state to still be the same after the user refreshes the page
Two options:
Store the state in the url by adding "/:state"
We must hit the api endpoint again to get the data based on the state. So it is always fresh
The url can be stored in history and copied/bookmarked
Everytime the state is changed by the user, the url changes causing a reload of the page
Store the state in redux and persist it
Have to install a package like redux-persist which takes some configuration
data persists on page reload so we don't need another api call
data may be outdated and need to be re-pulled
Which option is better? What scenarios break either option?
Everytime the state is changed by the user, the url changes causing a reload of the page
If you use something like react-router, app doesn't reload each time you change url.
Decision where to store some setting depends on the case. I usually prefer to store in url only things that are related to navigation: changing views/pages, opened modals, search/filters. Usually you want to store it in url when you want this url to be shareable with other users. So it you want to put some dropdown value in url, consider: Do you want browser navigation to change this value? Does this dropdown change some view?
Also, sometimes you have to store this selection on backend. Usually when it is a property of some entity or it's a setting. You have to consider whether you want this dropdown's value to be shared between multiple sessions on different devices.
The problem that I'm facing now is, there's a profile tab which shows some information on itself. I typed interface solutions like "input". After I save its value to data(data that placed on another component, especially contained in this.state). Then I shifted to component which renders its interface. In detail, I mentioned its value to which to show. Soooooo, I can't understand that how to still show it after reload? I hope it pulls something from back-end or axios or git things. Briefly, "how to maintain the data on the profile tab after reload? I'm in react js stuff.
React state is just a variable which stores data. When you refresh your browser, the browser clears its value from memory and reinitilizes that variable.
To get back that data, you have to store that data somewhere which persists even after browser refreshes like
You can use session Storage or local storage.
https://javascript.info/localstorage
You can user server to store your data and use axios to fetch data using useEffect hook.
You can also use the npm package redux-persist or react-persist https://www.npmjs.com/package/redux-persist
I'm pretty new to React and Redux and I've been setting my environment in the past week.
I was wondering if their was such a thing as a refresh button that doesn't refresh the whole page but just the components containing the props that have changed in the store.
Example :
User_1 changes the store.
User_2 clicks a refresh button on his page (container).
The components containing props that have been modified are refreshed for User_2.
The perfect situation would be if User_2's interface components would refresh as soon as User_2 does the action, but I don't think it's possible yet. (If it is, please mention it)
Thanks in advance
UPDATE:
If you use GraphQl, it's worth looking into their "subscription" solution.
If your two user's are on different computers, then the store is not shared between them. Changes made to one user's store are not going to impact the store of a second user.
It sounds like what you really want is websockets. But this would be something you need to manage with the server-side of your application first, and which react/redux would merely consume.
In general, components will always instantly update when their props change. If a component didn't update, then it's props are still the same.
I am making a react app using redux. I am going great except one issue.
Whenever I refresh the browser my state changed to initial state. Lets say I have a user authenticated and I have set him as authenticated: true and after authenticating when I refresh the page the state changed to initial and authenticated:false is set.
I am confused why is this happening ?
Can anyone point what might be the issue here
Redux stores are not persistent. When the page reloads, all data is initialized again. If you would like to save a piece of your store (or the whole thing) you will need to save it in localstorage, or saving it to your server and making a REST request asking for the data again.
You can use this package to save your store into localstorage.