title: How to prevent child component from re-rendering when using React hooks and memo?
body: <p>I just started experimenting with React hooks and I'm wondering how I can prevent a child component from re-rendering when it's parent re-renders.  I'm looking for something similar to returning false in <code>componentDidUpdate</code>.  My issue seems to stem from the click handler I'm calling in the child component to change state in the parent component.  Since the function is created in the parent component, it is created new on each parent render which triggers a prop change in the child component, which then causes the child to re-render <strong>(I think)</strong>.  Here is some sample code to help illustrate the situation.</p>
  
  <pre><code>function Parent() {
      const [item, setItem] = useState({ name: "item", value: 0 });
  
      const handleChangeItem = () =&gt; {
          const newValue = item.value + 1;
          setItem({ ...item, value: newValue });
      };
  
      return &lt;Child item={item} changeItem={handleChangeItem} /&gt;;
  }
  
  const Child = React.memo(function Child({ item, changeItem }) {
      function handleClick(){
          changeItem();
      }
      return (
          &lt;div&gt;
              Name: {item.name} Value: {item.value}
              &lt;button onClick={handleClick}&gt;change state in parent&lt;/button&gt;
          &lt;/div&gt;
      );
  });
  </code></pre>
  
  <p>How do I prevent Child component from rendering every time Parent component renders?  Should <code>handleChangeItem</code> in the parent live someplace else so that it is not re-created on each render?  If so, how does it get access to <code>item</code> and <code>setItem</code> returned by <code>useState</code>?</p>
  
  <p>I'm pretty new to react and just started playing with hooks so I'm probably missing something obvious.</p>