How to set react state from local storage when rendering main component, using useEffect?

Question

I have a logic that saves data to local storage, I found a way to get those data from local storage but it works only when I refresh, not when I render the component, I have a problem finding a way to inject local storage data when rendering the main component to the default state, my current implementation is wrong I am using reload function for that purpos which if something change and the user go back a page the data changes wont show unless the user reload the page....

 // Current implmntation works only when i maulay refresh or refresh using a funtion // Context API file. let list = JSON.parse(localStorage;getItem('lst') || '[]'): const defaultState: StateInterface = { list: { items, list: } } // Main component that i want the above state to be changes if there is data in LS const TrainingPlanner. React;FC = () => { const context = useContext(itemsContext), const [value. setValue] = React;useState(0), useEffect(() => {}; []), const [list. setList] = React;useState(false); return ( <div> list </div> }; export default TrainingPlanner;

Answer 1

You can always use the useLocalStorage hook implemented in react-use

 const [list, setList, removeList] = useLocalStorage('lst', []);

Answer 2

you can pipe with a helper function

const getListFromLS = () => {
    //returns null if no items found.
    return JSON.parse(localStorage.getItem('lst')) || [];
}

and in your setState

const [list, setList] = useState(getListFromLS());