title: how to stop re-rendering of list items in context consumer when state changes
body: <p>I have a react project and I use the context api to manage the app's state.</p>
  
  <p>I have a list of items with an onClick event that updates the state in the context. </p>
  
  <p>The problem is that when the state changes all items re-renders which causes a lag.</p>
  
  <p>My question is how to stop other items from re-rendering if not clicked on.</p>
  
  <p>item.jsx</p>
  
  <pre><code>import React, { useContext } from "react";
  import { MainContext } from "../../_context/PresentContext";
  
  const Item = ({item}) =&gt; (
  
   &lt;MainContext.Consumer&gt;
    {({handleSelectItem}) =&gt; (
     &lt;div&gt;
      &lt;button onClick={() =&gt; handleSelectItem(item)}&gt;{item.name}&lt;/button&gt;
     &lt;/div&gt;
     )
    }
   &lt;/MainContext.Consumer&gt;
  )
  </code></pre>
  
  <p>items.jsx</p>
  
  <pre><code>import React from "react";
  import Item from "./Item";
  
  
  const itemsList = [
   {id: 1, name: 'a'},
   {id: 2, name: 'b'},
   {id: 3, name: 'c'},
   {id: 4, name: 'd'}
  ]
  
  const Items = () =&gt; (
   &lt;div&gt;
    {itemsList.map(i =&gt; (
     &lt;Item item={item}/&gt;
    )
   )}
   &lt;/div&gt;
  
  )
  </code></pre>
  
  <p>the <code>handleSelectItem</code> functions just updates <code>selectedItem</code> on the context state and then i use it in a different compnent</p>
  
  <p>this is just a simple example do demonstrate the problem. the real itemsList has about 200 item.</p>