React w/hooks: prevent re-rendering component with a function as prop : <p>Let's say I have:</p>

<pre><code>const AddItemButton = React.memo(({ onClick }) =&gt; {
  // Goal is to make sure this gets printed only once
  console.error('Button Rendered!');
  return &lt;button onClick={onClick}&gt;Add Item&lt;/button&gt;;
});

const App = () =&gt; {
  const [items, setItems] = useState([]);

  const addItem = () =&gt; {
    setItems(items.concat(Math.random()));
  }

  return (
    &lt;div&gt;
      &lt;AddItemButton onClick={addItem} /&gt;
      &lt;ul&gt;
        {items.map(item =&gt; &lt;li key={item}&gt;{item}&lt;/li&gt;)}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
};
</code></pre>

<p>Any time I add an item, the <code>&lt;AddItemButton /&gt;</code> gets re-rendered because addItem is a new instance. I tried memoizing addItem:</p>

<pre><code> const addItemMemoized = React.memo(() =&gt; addItem, [setItems])
</code></pre>

<p>But this is reusing the setItems from the first render, while </p>

<pre><code> const addItemMemoized = React.memo(() =&gt; addItem, [items])
</code></pre>

<p>Doesn't memoize since <code>items</code> reference changes.</p>

<p>I can'd do</p>

<pre><code> const addItem = () =&gt; {
   items.push(Math.random());
   setItems(items);
 }
</code></pre>

<p>Since that doesn't change the reference of <code>items</code> and nothing gets updated.</p>

<p>One weird way to do it is:</p>

<pre><code>  const [, frobState] = useState();
  const addItemMemoized = useMemo(() =&gt; () =&gt; {
    items.push(Math.random());
    frobState(Symbol())
  }, [items]);
</code></pre>

<p>But I'm wondering if there's a better way that doesn't require extra state references. </p>
