DEV Community

Hidayt Rahman
Hidayt Rahman

Posted on

Handling Browser Storage with React Hooks

This is a very common issue when you need to store data in the browser by using any methods sessionStorage or localStorage with React Hooks.

let's get rid out of it. ๐Ÿ˜Ž

Scenario

I have a language that I change on the selection of dropdown and store on the browser.

const [language, setLanguage] = useState(null);
const changeLang = () => {
    // update language
     setLanguage("en-IN");
    // store language in browser as well
    localStorage.setItem('language', language);
}
Enter fullscreen mode Exit fullscreen mode

Does the above snippet look fine and store data???๐Ÿ™„ Noooo!!!! It canโ€™t store on the first hit, Because of the async behavior of setLanguage in useState() hooks.

Solution โ˜บ๏ธ

useEffect(() => {
   localStorage.setItem('language', language);
}, [language])
Enter fullscreen mode Exit fullscreen mode

This is nothing but a dependent state which gets fire when the language gets changed.

That's It!!!

Enjoy browser storage peacefully ๐Ÿ˜

{HappyCode}

Top comments (0)