title: prevent rerendering of some component inside array in react
body: <p>Suppose, i have a component <code>Parent</code> and i am rendering children like this.</p>
  <pre class="lang-js prettyprint-override"><code>const [items,setItems] = useState([1,2,3,4,5,6....]);
  const [pointer,setPointer] = useState(0);
  // inside return
  {items.map((item,idx)=&gt;{
      return &lt;ChildCanvas text={item} isPointer={pointer===idx} key={idx} idx={idx}/&gt;
  })}
  </code></pre>
  <p><code>pointer</code> and <code>items</code> both are <strong>different</strong> states in the same component. Whenever <code>pointer</code> changes I am doing some animation inside that child<code>(pointer===idx)</code>.</p>
  <p>At a time, <code>isPointer</code> will be true for only one <strong>ChildCanvas</strong> component. Here I am expecting that, react will rerender the child whose <code>isPointer</code> props has been changed.</p>
  <p>But, here whenever <code>isPointer</code> changes, React is rerendering all <code>ChildCanvas</code> components. <code>ChildCanvas</code> is a heavy component, so this makes the page <code>(unresponsive for some time)</code>.</p>
  <blockquote>
  <p>How i checked if a particular <code>ChildCanvas</code> has been rerendered or not.</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>function ChildCanvas({text,isPointer,idx}){
      console.log(`child ${idx} has been rerendered`);
      return // code...
  }
  </code></pre>
  <p>Now, whenever <code>pointer</code> changes then i am getting this</p>
  <pre class="lang-js prettyprint-override"><code>child 0 has been rerendered
  child 1 has been rerendered
  child 1 has been rerendered
  // up to the length of the array
  </code></pre>
  <p>How can i make sure to rerender only the component whose <code>isPointer</code> props has been changed.</p>