React: Update element of array without rerendering other array elements

Question

Is it possible to rerender an element of an array, preventing others rerender?

Example: Having an array of 500 <Card> components and editing <Card> number 27 (which updates myArray props), I would like to rerender only <Card> number 27.

render = () => {
    this.props.myArray.map(card => {
        return <Cards key={card.id} ...card />
    })
}

In my case, <Card> components are a bit heavy and I would like to avoid rerendering them if they didn't individually change, but as soon as myArray prop changes and fires render() method, every single <Card> is being rerendered, causing some performance issues on every <Card> change.

Answer 1

Finally I've solved the issue by using shouldComponentUpdate() method in Card component as Gabriele suggested, even if Card component is part of the updated array, it will keep the previous rendered state if shouldComponentUpdate() returns false.