title: useEffect array dependency is called in every render when array is not changed
body: <pre><code>import React, { useState, useEffect } from "react";
  
  export default function App() {
    const [columns, setColumns] = useState([
      { name: "a" },
      { name: "b" },
      { name: "c" }
    ]);
    const [isOpen, setIsOpen] = useState(false);
  
    const addName = () =&gt; setColumns([...columns, { name: "r" }]);
    const toggleOpen = () =&gt; setIsOpen(!isOpen);
  
    return (
      &lt;&gt;
        &lt;List columns={columns} /&gt;
        &lt;button onClick={toggleOpen}&gt;Toggle&lt;/button&gt;
        &lt;button onClick={addName}&gt;Add&lt;/button&gt;
        &lt;p&gt;{isOpen.toString()}&lt;/p&gt;
      &lt;/&gt;
    );
  }
  
  const List = ({ columns }) =&gt; {
    const names = columns.map(col =&gt; col.name);
    useEffect(() =&gt; {
      console.log("Names is changed to: ", names);
    }, [names]);
  
    return &lt;p&gt;{names.join(" ")}&lt;/p&gt;;
  };
  </code></pre>
  
  <p><code>Names is changed to:</code> is called, when <code>isOpen</code> state is changed in <code>App</code> component. 
  I want the <code>console.log</code> to be executed only when names array is changed.
  I think in <code>List</code> component, it is creating a new array whenever render, so that the previous array and the new array are not equal.</p>