https://stackoverflow.com/questions/43313372/how-to-listen-to-localstorage-in-react-js

hello! I have an app that stores a userMode in localstorage either PUBLIC or PRIVATE. i also have a button that i have confirmed works through the firefox browser, that switches/toggles between the two values. however any components that show the userMode variable inside do not react to this change.

As of now my components have a fetchUserMode hook that I have created. In my components i call this function to get the usermode and i was hoping the useEffect would listen for events and retrigger for me. However this is not the case since it will always stay/render the usermode that occured during the initial use function.


I found this stack overflow linked above. However it is 7 years old and I was wondering if there was any new methods or techniques to work/react to local storage changes. If not if someone could work through the documentation with me to understand it a little more I would be really grateful. As I have never really worked with react classes. Mostly just components.

'use client';
// Hook that looks into local storage mode and returns what state you are in

import { useState, useEffect } from 'react';

function fetchProfileMode() {
const [mode, setMode] = useState(null);

useEffect(() => {
if (typeof window !== 'undefined') {
const savedMode = localStorage.getItem('userMode');
setMode(savedMode ? savedMode : 'PUBLIC'); // Default to 'EXTROVERT'
}
}, []);

return mode;
}

export default fetchProfileMode;