title: How to check if localStorage is empty with React hooks?
body: <p>This is a continuation of another question I asked, <a href="https://stackoverflow.com/questions/60699289/adding-deleting-data-into-local-browser-storage-using-a-button-and-displaying-i">Adding/deleting data into local browser storage using a button, and displaying it in a UI table (React)</a></p>
  
  <p>I am trying to check localStorage and use an emitter to tell the console if localStorage is empty of any values.</p>
  
  <p><strong>I believe I have 2 issues.</strong> </p>
  
  <ol>
  <li>The App needs to check localStorage when it is initialized (when browser is opened)</li>
  <li>I need to use useState, so that the localStorage is checked every time a value is added/deleted</li>
  </ol>
  
  <p>Below is my attempt (index.js):</p>
  
  <pre><code>import React,{useState} from 'react';
  import ReactDOM from 'react-dom';
  const EventEmitter = require('events');
  
  const useStateWithLocalStorageArray = localStorageKey =&gt; {
    const [value, setValue] = React.useState(
      JSON.parse(localStorage.getItem(localStorageKey) || '[]' )
    );
    React.useEffect(() =&gt; {
      localStorage.setItem(localStorageKey, JSON.stringify(value))
    }, [value]);
    return [value, setValue];
  };
  
  const checkLocalStorage = function() {
    const myEmitter = new EventEmitter();
    myEmitter.on('event', () =&gt; {
      if (localStorage.getItem('customKey1') === '[]') {
        console.log('Local storage is empty');
      }
    });
    return myEmitter.emit('event');
  }
  
  const App =()=&gt;{
    const [items,setItems] = useStateWithLocalStorageArray('customKey1')
    const [value,setValue] = useState({NAME:'',AGE:'',SALARY:''})
    const [localValue, setLocalValue] = useState('')
  
  
    const updateValue = e =&gt;{
       setValue({...value,[e.target.id]:e.target.value})
    }
  
  
    return(
      &lt;div&gt;
        &lt;div&gt;
          &lt;input value={value.NAME} id='NAME' placeholder='Name' onChange={(e)=&gt;updateValue(e)}/&gt;
          &lt;input value={value.AGE } id='AGE' placeholder='Age' onChange={(e)=&gt;updateValue(e)}/&gt;
          &lt;input value={value.SALARY} id='SALARY' placeholder='Salary' onChange={(e)=&gt;updateValue(e)}/&gt;
        &lt;button onClick={()=&gt;{
          setItems([...items,{...value}])
          setValue({NAME:'',AGE:'',SALARY:''})
          checkLocalStorage(setLocalValue)
          }}&gt;ADD ITEM&lt;/button&gt;&lt;/div&gt;
  
        &lt;br/&gt;
        &lt;div&gt;List of Items&lt;/div&gt;
        &lt;br/&gt;
        { items &amp;&amp;
        &lt;div&gt;
          {
              items.map((item,index)=&gt;(
                &lt;li key={index}&gt;{item.NAME}-{item.AGE}-{item.SALARY} &lt;button onClick={()=&gt;{
                  setItems(items.filter((value,iindex) =&gt; iindex !== index))
                  checkLocalStorage(setLocalValue)
                }}&gt;Remove&lt;/button&gt; &lt;/li&gt;
              ))
          }
        &lt;/div&gt;
      }
      &lt;/div&gt;
    )
  }
  
  ReactDOM.render(&lt;App/&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>I made a function <code>checkLocalStorage()</code> that should be called every time a value is added, or deleted: </p>
  
  <pre><code>const checkLocalStorage = function() {
    const myEmitter = new EventEmitter();
    myEmitter.on('event', () =&gt; {
      if (localStorage.getItem('customKey1') === '[]') {
        console.log('Local storage is empty');
      }
    });
    return myEmitter.emit('event');
  }
  </code></pre>
  
  <p>But it is not working as I expect. What will happen is:</p>
  
  <ol>
  <li>I start the React App (console does not say "Local storage is empty")</li>
  <li>I submit a value, console says, "Local storage is empty" </li>
  <li>I refresh the browser, and "Local storage is empty" message disappears</li>
  <li>If I add another value again, same process occurs.</li>
  </ol>
  
  <p><strong>What SHOULD happen (if starting with empty localStorage):</strong></p>
  
  <ol>
  <li>I start the React App (console says "Local storage is empty")</li>
  <li>I submit a value (only one value present), no message to console </li>
  <li>I refresh page and still no console message</li>
  <li>I delete a value, "Local storage is empty" message appears in console</li>
  </ol>
  
  <p>I believe I am not using React hooks properly, I initialized the hook:</p>
  
  <pre><code>const [localValue, setLocalValue] = useState('')
  </code></pre>
  
  <p>I then try to use it like this inside <code>const App</code>:</p>
  
  <pre><code>checkLocalStorage(setLocalValue)
  </code></pre>
  
  <p>I am not sure, what I am doing wrong, like I said before, I think I am not using hooks correctly, if more information is needed, please let me know.</p>