react does not update localstorage value based on state

Question

I am using react to switch between light and dark mode in my website . I also want the theme to persist using localstorage . The problem is that while clicking on switch to toggle the theme the corresponding localstorage theme value does not update. I know that state updates are asynchronous but I want to fix this .

My code:

const [darkMode , setDarkMode] = useState(false);

  //change theme 
  const toggleTheme = ()=>{ 

    setDarkMode(!darkMode);
    const root = window.document.documentElement;
    if(localStorage.getItem("isDark")=== null){
      localStorage.setItem("isDark",darkMode);
    }else{
      localStorage.setItem("isDark",darkMode);
    }
    root.classList.toggle('dark');

  }

I tried using async await but the result was the same .

Duplicate: [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) — , Apr 02 '21 at 09:08
Solution: `const newValue = !darkMode;` and `setDarkMode(newValue);` and `localStorage.setItem("isDark", newValue);` — , Apr 02 '21 at 09:09
As a side note, your `if... else...` conditional does not make sense as you are going to do `localStorage.setItem("isDark",darkMode);` regardless of the condition — secan, Apr 02 '21 at 09:10

score 2 · Answer 1 · answered Apr 02 '21 at 09:14

2

You can use useEffect in order to keep watch on darkMode.

Here, useEffect will be called every time when darkMode value is updated. Hence, setting the localStorage value inside. And I removed if.. else.. condition as I guess there is no need of that, if you feel you can keep it.

const [darkMode , setDarkMode] = useState(false);

useEffect(() => {
  localStorage.setItem("isDark", darkMode);
}, darkMode);
 
// change theme 
const toggleTheme = ()=>{ 
  setDarkMode(!darkMode);
  const root = window.document.documentElement;
  root.classList.toggle('dark');
}

answered Apr 02 '21 at 09:14

Surjeet Bhadauriya

6,755
3
34
52

This always sets darkmode to true – vasilis 123 Apr 02 '21 at 09:17
Can you please check the value of `darkMode` inside useEffect by console it and tell me. – Surjeet Bhadauriya Apr 02 '21 at 09:18
Also `root.classList.toggle('dark');` you are passing value `dark` directly from here. Is there any reason. – Surjeet Bhadauriya Apr 02 '21 at 09:20
I am really busy rn . I will update later – vasilis 123 Apr 02 '21 at 09:22
Bhaddauriya The mode is correctly logged but on refresh it is always light mode and sets localstorage to light mode . The problem is that after I refresh my page in darkmode , the first time I toggle theme the localstorage value does not switch – vasilis 123 Apr 02 '21 at 09:47

Rishabh Singh · Accepted Answer · 2021-04-02T09:55:43.913

1

You can't use state variable darkMode just after updating it via setDarkMode due to its async nature. You could use useEffect hook but that wont be the best way imo just to solve a simple problem like this. Instead you can use it this way

// Initialize variable from localstorage value
const [darkMode, setDarkMode] = useState(
  () => JSON.parse(localStorage.getItem("isDark")) ?? false
);

//change theme
const toggleTheme = () => {
  const updatedDarkMode = !darkMode;

  setDarkMode(updatedDarkMode);
  const root = window.document.documentElement;
  localStorage.setItem("isDark", updatedDarkMode);

  root.classList.toggle("dark");
};

edited Apr 02 '21 at 09:55

answered Apr 02 '21 at 09:47

Rishabh Singh

353
2
8

The problem is that after I refresh my page in darkmode , the first time I toggle theme the localstorage value does not switch – vasilis 123 Apr 02 '21 at 09:50
@vasilis123 try the updated solution.. – Rishabh Singh Apr 02 '21 at 09:56
It finally worked – vasilis 123 Apr 02 '21 at 09:58

react does not update localstorage value based on state

2 Answers2