title: How to avoid unnecessary render in React using Hooks API
body: <p>Please follow my code snippet below, When I click on any button (add, edit, remove) all my components gets re-render including the <code>Title</code> component which has no <code>props</code> or <code>stats</code>. It may be fine if I have a few components but lets assume that I have over <strong>15</strong> or more with fetching / saving data, is that <strong>OK</strong> or should be avoided?</p>
  
  <p>I've tried to use <code>useCallback</code> hooks (with <strong>handleRemove</strong>) but obviously that doesn't work as intended.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Button = ({ title, count, onClick }) =&gt; {
    console.log(`Rendering ${title}`)
    return (
      &lt;button onClick={onClick}&gt;
        {title} ({count})
      &lt;/button&gt;
    )
  }
  const Header = () =&gt; {
    console.log("Rendering Title")
    return &lt;h1&gt;App Title&lt;/h1&gt;
  }
  
  const Parent = () =&gt; {
    const [add, setAdd] = React.useState(0)
    const [edit, setEdit] = React.useState(0)
    const [remove, setRemove] = React.useState(0)
    
    const handleAdd = () =&gt; setAdd(add + 1)
    const handleEdit = () =&gt; setEdit(edit + 1)
    const handleRemove = React.useCallback(() =&gt; {
      setRemove(remove + 1)
    }, [remove])
  
    return (
      &lt;React.Fragment&gt;
        &lt;Header /&gt;
        &lt;Button title="Add" onClick={handleAdd} count={add} /&gt;
        &lt;Button title="Edit" onClick={handleEdit} count={edit} /&gt;
        &lt;Button title="Remove" onClick={handleRemove} count={remove} /&gt;
      &lt;/React.Fragment&gt;
    )
  }
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Parent /&gt;
        &lt;button onClick={console.clear}&gt;Clear log&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  
  ReactDOM.render( &lt;App /&gt; , document.getElementById('root'))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"&gt;&lt;/script&gt;
  &lt;script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>