title: ReactJS state of parent to update only the child component and not the parent
body: <p>Lets pretend we have the following components.</p>
  <p>`</p>
  <pre><code>const parent = () =&gt; {
  
  const [item, setItem] = useState(true)
  
  return (
  
   &lt;div
     &lt;div onHover={()=&gt;setItem(!item)}&gt; 
        ...
     &lt;/div&gt;
     &lt;Child item={item}/&gt;
   &lt;/div&gt;)
  }
  
  const Child = ({item}) =&gt; {
  
  return (item?
    
    &lt;div&gt;
      &lt;h1&gt; Cool! &lt;h1/&gt;
    &lt;/div&gt;
    : 
   &lt;div&gt;
     &lt;h1&gt; Not Cool! &lt;h1/&gt;
   &lt;/div&gt;
  }
  </code></pre>
  <p>`</p>
  <p>The hover that happens on parent element, affects the render method of child.
  In my case, every time I hover on the parent element both parent and child re-renders. I wanna implement such as only the child re-renders.</p>
  <p>What would be the best approach to this ?</p>