How to optimize an application that receives properties and a re-render array of components?

Viewed 49

So, I want to know, how to update a single element in array of components?

class App extends React.Component {
    render() {
        const { current, items } = this.props;
        return(
            <div>
                { items.map(({ id, value }) => (
                    <div style={ { backgroundColor: (id === current.id ? 'cyan' : '') } }
                         key={ id }>
                        { value }
                    </div>
                ))}
            </div>
        );
    }
}

const items = [{ id: 1, value: 'A' }, { id: 2, value: 'B' }];
const current = items[0];
ReactDOM.render(<App items={ items } current={ current } />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

If I have 50 elements and I receive the current prop, then its map works again 50 times, but I want to re-render only the one element from this map if current.id === item.id. What do I need to do?

0 Answers
Related