title: React sync with local storage and update dynamically
body: <p>I am using a custom <code>useLocalStorage</code> hook defined:</p>
  <pre><code>import { useState } from 'react';
  
  // Hook
  function useLocalStorage(key, initialValue) {
      // State to store our value
      // Pass initial state function to useState so logic is only executed once
      const [storedValue, setStoredValue] = useState(() =&gt; {
        try {
          // Get from local storage by key
          const item = window.localStorage.getItem(key);
          // Parse stored json or if none return initialValue
          return item ? JSON.parse(item) : initialValue;
        } catch (error) {
          // If error also return initialValue
          console.log(error);
          return initialValue;
        }
      });
    
      // Return a wrapped version of useState's setter function that ...
      // ... persists the new value to localStorage.
      const setValue = value =&gt; {
        try {
          // Allow value to be a function so we have same API as useState
          const valueToStore =
            value instanceof Function ? value(storedValue) : value;
          // Save state
          setStoredValue(valueToStore);
          // Save to local storage
          window.localStorage.setItem(key, JSON.stringify(valueToStore));
        } catch (error) {
          // A more advanced implementation would handle the error case
          console.log(error);
        }
      };
    
      return [storedValue, setValue];
    }
  
    export default useLocalStorage;
  </code></pre>
  <p>in my main app, I have a searchbar and a list component, and I want to add whatever the user writes to the local storage and to list it below the searchbar, and this is what I tried doing :</p>
  <pre><code>function App() {
    const [data, changeData] = useLocalStorage('data', []);
    return {
     &lt;div className=&quot;App&quot;&gt;
     &lt;SearchBar changeData={changeData} data={data}&gt; &lt;/SearchBar&gt;
          &lt;ListComp data={data}&gt; &lt;/ListComp&gt;
     &lt;/div&gt;
    }
  </code></pre>
  <p>Whereas ListComp looks like this :</p>
  <pre><code>class ListComp extends React.Component {
  
      
  
      render() { 
          const { data } = this.props;
          return data.map(
              city =&gt; &lt;p key={city}&gt; {city} &lt;/p&gt;
          )
      }
  }
  
  export default ListComp
  </code></pre>
  <p>and SearchBar looks like this :</p>
  <pre><code>import { Input } from 'antd'
  
  function SearchBar(props) {
  
    const { Search } = Input
    const { changeData, data } = props
  
    return (
        &lt;&gt;
      &lt;div&gt;
        &lt;Search
          type=&quot;text&quot;
          placeholder=&quot;Enter a city name&quot;
          onSearch={(e) =&gt; {
              data.push(e)
              changeData(data)
          }}
        /&gt;
  
      &lt;/div&gt;
  
      &lt;/&gt;
    );
  }
  
  export default SearchBar;
  </code></pre>
  <p>The problem is that while the localStorage DOES update, my components don't seem to update and I can't see the updated list on the screen as soon as i press the button - I need to refresh to see it updated.</p>
  <p>Anyone knows what I am doing wrong? I am very new to react and trying to learn it so i'd love some help!</p>
  <p>Thanks :)</p>