How to maintain state after a page refresh in ReactJS ?

In React, preserving page state typically involves two core concepts: state management and persistent storage. After a page refresh (e.g., when a user manually refreshes the page or the browser is restarted), we often want certain states to remain unchanged so that users can continue their operations without interruption. There are several methods to achieve this requirement:

1. Using Browser's Local Storage (LocalStorage or SessionStorage)

This is one of the most common approaches. LocalStorage and SessionStorage provide simple key-value storage for string data. Data stored in LocalStorage persists across page refreshes, while SessionStorage data disappears after the page session ends.

Example: Suppose we have a shopping cart application where items added by users remain after a page refresh.

jsx
class ShoppingCart extends React.Component {
  componentDidMount() {
    const cart = localStorage.getItem('cart');
    if (cart) {
      this.setState({ cart: JSON.parse(cart) });
    }
  }

  componentDidUpdate() {
    const { cart } = this.state;
    localStorage.setItem('cart', JSON.stringify(cart));
  }

  // Other code...
}

In this example, we check for shopping cart data in LocalStorage when the component mounts. If present, we initialize the state with it. Whenever the component updates (e.g., when a user adds new items), we also synchronize the data with LocalStorage.

2. Using URL Parameters

For simple states such as pagination or filtering conditions, URL parameters can maintain them. The advantage is that users can directly navigate to specific state pages via the URL.

Example:

jsx
class ProductPage extends React.Component {
  componentDidMount() {
    const params = new URLSearchParams(window.location.search);
    const page = params.get('page');
    this.setState({ page });
  }

  // Handle page change
  handlePageChange = (newPage) => {
    this.setState({ page: newPage });
    const params = new URLSearchParams(window.location.search);
    params.set('page', newPage);
    window.history.pushState({}, '', '?' + params.toString());
  }

  // Other code...
}

Here, we read pagination information from the URL and update it when the page number changes. This ensures users return to the same pagination position even after a page refresh.

3. Combining Redux with Persistence Libraries

For complex applications with numerous states, using a state management library like Redux is beneficial. By integrating with libraries such as redux-persist, persistent state can be implemented efficiently.

Example:

jsx
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // Using LocalStorage as the storage

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

In this example, redux-persist automatically handles persistent storage of Redux states. Every state update is saved to LocalStorage, and the state is restored when the application loads.

These methods have distinct advantages and trade-offs, and the choice depends on specific application requirements and user experience goals. Each method effectively helps React applications maintain state after a page refresh, providing a more cohesive and user-friendly experience.