NEXT.JS - LocalStorage reverts value to original instead of saving on refresh

Question

When you first run the component, it should display "1", and on button click, append it by 3, which it does. Value inside localstorage also changes, but when i reload the page, localstorage changes again to 1... what am i missing?

import { useState, useEffect } from 'react'

function Test() {
    
    const [testNum, setTestNum] = useState(1);

    useEffect(() => {
        const data = window.localStorage.getItem("MY_TEST_ITEM");
        setTestNum(JSON.parse(data));
    }, []);

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

    

  return (
    <div>
        <h1>{testNum}</h1>
        <button onClick={() => { setTestNum(testNum + 3) }}>Add</button>
    </div>
  )
}

export default Test

`useEffect` always runs on initial render and if there are dependencies also runs everytime they change. In your case you don't want to run initially, but only when `testNum` changes. You can't control this with the useEffect alone, you must create a condition check inside. But I would say a better solution would be to set `localStorage` directly in your `onClick` event instead of setting af state and rely on `useEffect` to set it. — Bqardi, Oct 23 '22 at 10:53

score 1 · Answer 1 · answered Oct 23 '22 at 10:49

1

try this instead :

const [testNum, setTestNum] = useState(window.localStorage.getItem("MY_TEST_ITEM") === null ? 1 : window.localStorage.getItem("MY_TEST_ITEM"));

answered Oct 23 '22 at 10:49

mohammad mohammadi nodhe

1,098
6
16

Then I get "ReferenceError: window is not defined" – marko2304 Oct 23 '22 at 10:51
how about using "localStorage.getItem" without "window." – mohammad mohammadi nodhe Oct 23 '22 at 10:52
Then I get "ReferenceError: localStorage is not defined" – marko2304 Oct 23 '22 at 10:53
are you using nextjs? – mohammad mohammadi nodhe Oct 23 '22 at 10:55
const mylocalstorage = typeof window !== 'undefined' ? localStorage.getItem('MY_TEST_ITEM') : null const [testNum, setTestNum] = useState(mylocalstorage === null ? 1 : mylocalstorage); – mohammad mohammadi nodhe Oct 23 '22 at 10:57
yes, I do... do I need to do something differently then? – marko2304 Oct 23 '22 at 10:58
1

next js try to render the page on server so there is no local storage until you make sure your app is delivered to the client. – mohammad mohammadi nodhe Oct 23 '22 at 11:00
also this link may be helpful. https://stackoverflow.com/questions/52474208/react-localstorage-is-not-defined-error-showing – mohammad mohammadi nodhe Oct 23 '22 at 11:04
1

Up vote as this did answer the original question and spot important missing details. – Yogi Oct 23 '22 at 11:11

leantrim · Answer 2 · 2022-10-23T11:06:51.960

Every time you reload your page your state refreshes.

You have testNum set to 1 so every render it will be set to that.

const [testNum, setTestNum] = useState(1);

Then you have these useEffects running at the same time

    useEffect(() => {
    const data = window.localStorage.getItem("MY_TEST_ITEM");
    setTestNum(JSON.parse(data));
}, []);

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

The second useEffect will render before the first one, thus setting the localStorage to 1.

UseEffect is actually not needed in this case. Try this;

const storageValue = window.localStorage.getItem("MY_TEST_ITEM";
const [testNum, setTestNum] = useState(storageValue ?? 0 );

updateLocalStorageFunc(value){
   setTestNum(value)
   window.localStorage.setItem("MY_TEST_ITEM", JSON.stringify(testNum))
}
    


return (    
<div>
    <h1>{testNum}</h1>
    <button onClick={() => { updateLocalStorageFunc(testNum + 3) }   
</div>)

Souhail Benlhachemi · Accepted Answer · 2022-10-23T12:39:50.783

0

Basically you are saying give "testNum" the value 1 on every page refresh, that means your local storage will be always updated to the initial value on the refresh which is 1. So the solution is very obvious, all what you need to do is change the initial state value which should be the localStorage value not the hard coded value.

const [loading, setLoading] = useState(true)
const [testNum, setTestNum] = useState(null)
const intialValue = 1

useEffect(() => {
    const localStorageValue = window.localStorage.getItem("YOUR_ITEM_KEY") || intialValue
    setTestNum(Number(localStorageValue))
    setLoading(false)
}, [])

useEffect(() => {
    testNum !== null && window.localStorage.setItem("YOUR_ITEM_KEY", testNum)
}, [testNum])

if(loading) return <div>Loading ...</div>
return(
    <>
        <div>testNum: {testNum}</div>
        <button onClick={e => setTestNum(testNum + 3)}>increment testNum by 3</button>
    </>
)

You can also use the useMemo hook to avoid any unnecessary re-renders

edited Oct 23 '22 at 12:39

answered Oct 23 '22 at 11:23

Souhail Benlhachemi

137
5

I tried it but it doesn't seem to work, I still get 1 on refresh... – marko2304 Oct 23 '22 at 11:54
use the code I sent you + the useEffect that updates the localStorage on every testNum change – Souhail Benlhachemi Oct 23 '22 at 11:56
I tried that, still nothing happens... I also tried editing code like this: setTestNum(JSON.parse(localStorageValue) - also no luck – marko2304 Oct 23 '22 at 11:59
I tested the code on my machine, please retry with the new code above, it will work now – Souhail Benlhachemi Oct 23 '22 at 12:35

NEXT.JS - LocalStorage reverts value to original instead of saving on refresh

3 Answers3