React Persisting State

In React, state is typically temporary—it exists only while the component is mounted. When the page reloads, all state is lost. To keep state data persistent across page reloads or sessions, developers use browser storage like LocalStorage or SessionStorage.

learn code with durgesh images

Persisting state is especially useful for:

Saving user preferences (theme, language)
Remembering form data
Retaining shopping cart items
Storing authentication tokens

LocalStorage vs SessionStorage

Feature	LocalStorage	SessionStorage
Lifespan	Persistent until manually cleared	Cleared when browser tab closes
Storage Limit	~5-10 MB per domain	~5 MB per domain
Scope	Accessible across tabs/windows of same origin	Only accessible in the current tab
Use Cases	Theme, tokens, preferences	Temporary form data, session state

Note: Both are key-value stores and store only strings, so objects/arrays need JSON.stringify / JSON.parse.

Persisting State with LocalStorage

Example – Counter with Persistent State

import React, { useState, useEffect } from "react";

function Counter() {
  // Load initial state from localStorage
  const [count, setCount] = useState(() => {
    const saved = localStorage.getItem("count");
    return saved ? JSON.parse(saved) : 0;
  });

  // Save state to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem("count", JSON.stringify(count));
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

Persisting State with SessionStorage

SessionStorage works like LocalStorage but is cleared when the browser tab closes.

const [sessionData, setSessionData] = useState(() => {
  const saved = sessionStorage.getItem("data");
  return saved ? JSON.parse(saved) : null;
});

useEffect(() => {
  sessionStorage.setItem("data", JSON.stringify(sessionData));
}, [sessionData]);

Persisting Complex Objects or Arrays

You can persist arrays and objects using JSON:

const [todos, setTodos] = useState(() => {
  const saved = localStorage.getItem("todos");
  return saved ? JSON.parse(saved) : [];
});

useEffect(() => {
  localStorage.setItem("todos", JSON.stringify(todos));
}, [todos]);

Creating a Reusable Hook

You can create a usePersistedState hook:

import { useState, useEffect } from "react";

function usePersistedState(key, defaultValue) {
  const [state, setState] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : defaultValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState];
}

export default usePersistedState;

Usage:

const [theme, setTheme] = usePersistedState("theme", "light");

This makes persistent state management reusable across your app.