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