title: React list, show active item onClick. Without re-rendering the list
body: <p>I want to show different style for the stock item which is clicked, but when i set activeItem to idx clicked, react re-renders the whole list again. Is there any way to show only one active item without re-rendering the list</p>
  <pre><code>import React, { useState,memo} from &quot;react&quot;;
  
  const StocksList=({stocksData})=&gt;{
  
      const [activeItem, setActiveItem] = useState(0);
      
      const Item=({stock,idx})=&gt;{
          return (
              &lt;li 
                  className={activeItem===idx ? &quot;active-stock-item&quot; : &quot;stock-item&quot; }
                  onClick={()=&gt;{
                      setActiveItem(idx);
                  }} 
              &gt;
                  {`${idx+1}. ${stock[&quot;Name&quot;]}`}
              &lt;/li&gt;
          )
      }
      
      return(
          stocksData.map((stock,idx) =&gt; &lt;Item key={stock._id} {...{stock,idx}} /&gt;)
      )
  }
  
  export default memo(StocksList)
  </code></pre>