This content originally appeared on Bits and Pieces - Medium and was authored by Dilantha Prasanjith
Learn different ways of persisting React state between page reloads
1. Using LocalStorage — Class Components
One of the straightforward options is to use localStorage in the browser to persist the state. Let’s take a look at an example.
We have count in our state. Now let’s say if we want to keep this count value persist when the page reloads, we can do that by simply introducing localStorage.
As you can see, now we store the state value whenever we call the setState method. This is a simple approach to achieve what we want.
Since we were looking at class components, let’s look at how we would do that in a functional component.
Tip: Build & share independent components with Bit
Bit is an ultra-extensible tool that lets you create truly modular applications with independently authored, versioned, and maintained components.
Use it to build modular apps & design systems, author and deliver micro frontends, or simply share components between applications.
2. Using LocalStorage — Functional Components
First, we will convert our class-based component to a functional component.
Now let’s look at how we can add localStorage to persist the state to the above.
Here you can notice that we have taken a slightly different approach when it comes to functional components. We are using useEffect hook to do two things.
- To track changes and update the LocalStorage.
- To retrieve the stored value from LcoalStorage at the initialization.
3. Using LocalStorage with Redux Store
One issue with storing state in localStorage at the component level is when we have multiple instances of the same component. It could lead to unexpected behavior since it creates duplicate keys in localStorage.
To fix this issue, we can;
- Pass an id to a reusable component and use it to store the value in localStorage.
- Or persist the state at a higher level.
If we use Redux, we can use it to persist the app state in localStorage.
First, let’s look at how we would do that manually, and then we can check how we can do that with “Redux Persist,” a library that would handle it for us.
Here we subscribe to the store updates and persist it to the localStorage. And when the app is initializing, we can pass the initial state from localStorage.
4. Using Redux Persist
Instead of handling persisting and hydrating state manually, we can use a library to do that for us.
Note: Redux Persist is a popular library in that regard.
As you can see, we can save and initialize persistStore using persistReducer from Redux Persist.
5. Using URL Params
Although this is the most obvious, let’s look at how we can use URL params to persist state. And this approach is suitable if the data is simple and straightforward with primitive values due to URL length restrictions.
If we look at the code closely, it pushes the state into the browser history, and when we initialize the component, we inherit the initial values from URL params.
One of the significant advantages here is that it supports both persisting states for reloads and allows to navigate between historical states using the browser back button.
Conclusion
We can use localStorage and URL params to persist the App state in a React Application.
For a simple use case, we can use URL params. If the data is a bit more complicated, we can go for storing it in the localStorage. In the localStorage approach, we can decide whether we will persist at the component level or at the App level.
To make things simple, we can use libraries like Redux Persist to handle persisting and rehydrating the App State for us.
However, regardless of the option you choose, it’s also essential to keep control over the state changes. Once the state is set, it could potentially break the application for some users if you modify the state-related code in a newer release.
Thank you for reading. And don’t forget to tell us what you think in the comment section. ?
Learn More
5 Methods to Persisting State Between Page Reloads in React was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Dilantha Prasanjith
Dilantha Prasanjith | Sciencx (2021-04-07T23:38:40+00:00) 5 Methods to Persisting State Between Page Reloads in React. Retrieved from https://www.scien.cx/2021/04/07/5-methods-to-persisting-state-between-page-reloads-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.