title: useMemo hook not working with map elements
body: <p>I am using useMemo hook to render map items.I added items parameter to useMemo hook, based on items change it will render. But changing loading state and items change, Item custom component rendering twice. Am i doing any mistake on using useMemo hook, please correct me.</p>
  <pre><code>Home:
  
  import React, { useState, useEffect, useMemo } from &quot;react&quot;;
  import Item from &quot;./Item&quot;;
  
  const array = [1];
  const newArray = [4];
  
  const Home = () =&gt; {
    const [items, setItems] = useState(array);
    const [loading, setLoading] = useState(false);
    const [dataChange, setDataChange] = useState(1);
  
    const renderItems = (item, index) =&gt; {
      return (
        &lt;div key={item}&gt;
          &lt;Item id={item}&gt;&lt;/Item&gt;
        &lt;/div&gt;
      );
    };
    useEffect(() =&gt; {
      if (dataChange === 2) {
        setLoading(true);
        setTimeout(() =&gt; {
          setLoading(false);
          setItems(newArray);
        }, 3000);
      }
    }, [dataChange]);
  
    const memoData = useMemo(() =&gt; {
      return &lt;div&gt;{items.map(renderItems)}&lt;/div&gt;;
    }, [items]);
  
    return (
      &lt;div style={{ display: &quot;flex&quot;, flexDirection: &quot;column&quot; }}&gt;
        &lt;input
          onClick={() =&gt; {
            setDataChange(2);
          }}
          style={{ height: 40, width: 100, margin: 20 }}
          type=&quot;button&quot;
          value=&quot;ChangeItem&quot;
        &gt;&lt;/input&gt;
        &lt;div&gt;{loading ? &lt;label&gt;{&quot;Loading&quot;}&lt;/label&gt; : &lt;div&gt;{memoData}&lt;/div&gt;}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  export default React.memo(Home);
  
  Item:
  
  import React,{useEffect} from &quot;react&quot;;
  const Item = (props) =&gt; {
    console.log(&quot;props&quot;, props);
  useEffect(() =&gt; {
  // call api with props.id
   }, [props]);
    return &lt;div&gt;Hello world {props.id}&lt;/div&gt;;
  };
  export default React.memo(Item);
  </code></pre>
  <p>Result:
  first time :
  <code>props {id: 1}</code></p>
  <p>After click :
  <code>props {id: 1}</code>
  <code>props {id: 4}</code></p>