I have a main menu with 4 pages. If I do a hard refresh when I am on any of the pages, React takes me back to the page 1 screen. I want the user to stay on the same page when hard refresh happens.
Main Menu
page 1
page 2
page 3
page 4
I'm thinking useRef would be helpful, though I don't know how to structure the logic. Ideas are most appreciated!
Nothing you store as React state persists page refreshes. The LocalStorage Browser API exists to solve this problem.
The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. MDN
You could implement something like that in react with a custom hook like useLocalStorage that behaves similarly to useState, except that it will persists across page-refreshes using LocalStorage.
// persists across page loads
const [currentPage, setCurrentPage] = useLocalStorage('page-name')
Related
I made a comment application using react
I have three input types (text, link, image) I want them still present the data even after refreshing (reload) the page
You can use localStorage for this. Have a look at localStorage
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
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 currently using React + Redux in my app. When my user login I make all calls to API to stock the data in different reducers.
I recently added a personalized picture that goes into that reducer in base64 format. With that change, if a user has 3/4 pictures if their is a reload, the application reducer where pictures are become empty, as if a limitation was touch.
How should I proceed? One call by webpage? One specific call for the picture page?
Thank you
Redux state will always be reset, after a refresh. If you want to persist something to stay there after a refresh, you need to use redux-persist, or sessionStorage/localStorage. If you want to make sure that the user info stays up to date, you could make the call, to fetch the user data, in the componendDidMount function of the root component (the app component that gets rendered for each page), so that it gets called after every refresh, on each page.
I've build a pagination using react bootstrap. Everything works fine except when i refresh the page while i'm at page, let's say 3, the app refreshes and goes to page 1.
I've tried using react context but the page parameter had problems with other context parameters because i am using useEffect on them.
When you refresh a page, everything starts all over again from the beginning by default.
If you want to keep your state, there's typically two solutions :
store a part of your state in the url
store a part of your state in the localStorage
Then, on first load, try to retreive values from url or localStorage and put them in initial state values.