title: Make localStorage retain its content on page refresh in React
body: <p>I am trying to add a favorite page to my application, which basically will list some of the previously inserted data. I want the data to be fetched from localStorage. It essentially works, but when I navigate to another page and come back, the localStorage is empty again. I want the data in localStorage to persist when the application is refreshed.</p>
  
  <p>The data is set to localStorage from here</p>
  
  <pre><code>import React, { useState, createContext, useEffect } from 'react'
  export const CombinationContext = createContext();
  
  const CombinationContextProvider = (props) =&gt; {
  let [combination, setCombination] = useState({
      baseLayer: '',
      condiment: '',
      mixing: '',
      seasoning: '',
      shell: ''
  });
  const saveCombination = (baseLayer, condiment, mixing, seasoning, shell) =&gt; {
      setCombination(combination = { baseLayer: baseLayer, condiment: condiment, mixing: mixing, seasoning: seasoning, shell: shell });
  }
  let [combinationArray, setCombinationArray] = useState([]);
  useEffect(() =&gt; {
      combinationArray.push(combination);
      localStorage.setItem('combinations', JSON.stringify(combinationArray));
  }, [combination]);
  return (
      &lt;CombinationContext.Provider value={{combination, saveCombination}}&gt;
          { props.children }
      &lt;/CombinationContext.Provider&gt;
  );
  }
  
  export default CombinationContextProvider;
  </code></pre>
  
  <p>And fetched from here</p>
  
  <pre><code>import React, { useContext, useState } from 'react'
  import { NavContext } from '../contexts/NavContext';
  
  const Favorites = () =&gt; {
  let { toggleNav } = useContext(NavContext);
  let [favorites, setFavorites] = useState(localStorage.getItem('combinations'));
  console.log(favorites);
  return (
      &lt;div className="favorites" &gt;
          &lt;img className="menu" src={require("../img/tacomenu.png")} onClick={toggleNav} /&gt;
          &lt;div className="favorites-title"&gt;YOUR FAVORITES&lt;/div&gt;
          &lt;div&gt;{ favorites }&lt;/div&gt;
      &lt;/div&gt;
  );
  }
  
  export default Favorites;
  </code></pre>