how to stop rendering component when sorted

I use ReactJS. Let's say I have an array:

const arr = [obj1,obj2,obj3,obj4.....]

And I create react component using these data. Let's say:

const Cart = ({item}) => {
    return (
        <h1>{item.name}</h1>
        <div>{item.text}</div>
        <img src={item.text} alt="image of obj"/>
   )
}

And:

<div>
    {arr.map((item,index)=><Cart key={index} item={item}/>)}
</div>

When I sort arr, all Cart components will rerender right? Is there a way to sort my components without re-rendering Cart components?