1

5 Methods to Persisting State Between Page Reloads in React

 2周前 阅读数 1
以下为 快照 页面,建议前往来源网站查看,会有更好的阅读体验。
原文链接: https://blog.bitsrc.io/5-methods-to-persisting-state-between-page-reloads-in-react-8fc9abd3fa2f

5 Methods to Persisting State Between Page Reloads in React

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.

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: Build & share independent components with Bit

Bit is an ultra-extensible tool that lets you create truly modular applicationswith 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.

Example: A ‘tech-jokes’ app built with independent components. components were shared on Bit.dev

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.

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

Learn More


猜你喜欢

关于极客头条


聚合每日国内外有价值,有趣的链接。