title: React w/hooks: prevent re-rendering component with a function as prop
body: <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>