5 Methods to Persisting State Between Page Reloads in React

Learn different ways of persisting React state between page reloads

Dilantha Prasanjith
Bits and Pieces

--

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.

A Component with State

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.

A Component with state and 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: You can use an OSS tool like Bit to easily share components across teams and projects to speed up development and make sure your users experience a consistent design at every touchpoint. Maximize design system adoption by transitioning from a centralized model to a distributed and modular system.
Here’s how:

2. Using LocalStorage — Functional Components

First, we will convert our class-based component to a functional component.

A Function Component with State

Now let’s look at how we can add localStorage to persist the state to the above.

A Function Component with state and localStorage

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.

  1. To track changes and update the LocalStorage.
  2. To retrieve the stored value from LcoalStorage at the initialization.

💡 Pro tip: Extract this code for localStorage away into a custom hook called useLocalStorage. Then, you can use a tool like Bit (mentioned earlier) to publish, version, and reuse it across all of your projects with a simple npm i @bit/your-username/use-localstorage. Find out more here, and here.

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.

Using localStorage with Redux

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.

Using URL Params

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. 🤔

Build React Apps with reusable components, just like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

Micro-Frontends

Design System

Code-Sharing and reuse

Monorepo

--

--