title: useState(new Map()) is not working, but object does
body: <p>I honestly have no idea what is going on here. I have this code, on first render it should fetch popular repos and set them to the repos state, which should cause a re-render and paint the new repos on the DOM. The reason I use Map/obj is because I'm caching the repos to avoid re-fetch. 
  The code doesn't work as expected, it's not setting any new state, and I can verify it in the react dev tools. For some reason if I click around on Components in the devtools, the state updates(?!), but the DOM is still not painted (stuck on Loading), which is a very strange behavior.</p>
  
  <pre><code>export default () =&gt; {
      const [selectedLanguage, setSelectedLanguage] = useState('All');
      const [error, setError] = useState(null);
      const [repos, setRepos] = useState(() =&gt; new Map());
  
      useEffect(() =&gt; {
          if (repos.has(selectedLanguage)) return;
          (async () =&gt; {
              try {
                  const data = await fetchPopularRepos(selectedLanguage);
                  setRepos(repos.set(selectedLanguage, data));
              } catch (err) {
                  console.warn('Error fetching... ', err);
                  setError(err.message);
              }
          })();
      }, [selectedLanguage, repos]);
  
      const updateLanguage = useCallback(lang =&gt; setSelectedLanguage(lang), []);
  
      const isLoading = () =&gt; !repos.has(selectedLanguage) &amp;&amp; !error;
  
      return (
          &lt;&gt;
              &lt;LanguagesNav
                  selected={selectedLanguage}
                  updateLanguage={updateLanguage}
              /&gt;
              {isLoading() &amp;&amp; &lt;Loading text="Fetching repos" /&gt;}
              {error &amp;&amp; &lt;p className="center-text error"&gt;{error}&lt;/p&gt;}
              {repos.has(selectedLanguage)
                  &amp;&amp; &lt;ReposGrid repos={repos.get(selectedLanguage)} /&gt;}
          &lt;/&gt;
      );
  };
  </code></pre>
  
  <p><strong>However</strong>, if I change up the code to use object instead of a Map, it works as expected. What am I missing here? For example, this works (using obj instead of a Map)</p>
  
  <pre><code>const Popular = () =&gt; {
      const [selectedLanguage, setSelectedLanguage] = useState('All');
      const [error, setError] = useState(null);
      const [repos, setRepos] = useState({});
  
      useEffect(() =&gt; {
          if (repos[selectedLanguage]) return;
          (async () =&gt; {
              try {
                  const data = await fetchPopularRepos(selectedLanguage);
                  setRepos(prev =&gt; ({ ...prev, [selectedLanguage]: data }));
              } catch (err) {
                  console.warn('Error fetching... ', err);
                  setError(err.message);
              }
          })();
      }, [selectedLanguage, repos]);
  
      const updateLanguage = useCallback(lang =&gt; setSelectedLanguage(lang), []);
  
      const isLoading = () =&gt; !repos[selectedLanguage] &amp;&amp; !error;
  
      return (
          &lt;&gt;
              &lt;LanguagesNav
                  selected={selectedLanguage}
                  updateLanguage={updateLanguage}
              /&gt;
              {isLoading() &amp;&amp; &lt;Loading text="Fetching repos" /&gt;}
              {error &amp;&amp; &lt;p className="center-text error"&gt;{error}&lt;/p&gt;}
              {repos[selectedLanguage]
                  &amp;&amp; &lt;ReposGrid repos={repos[selectedLanguage]} /&gt;}
          &lt;/&gt;
      );
  };
  </code></pre>