component_performance.js

import React, { Component } from 'react';

class MsgItem extends Component {
  render() {
    return <li style={{ margin: "10px" }}> {this.props.msg} </li>;
  }
}

export default class App extends Component {
  state = { messages: [] }

  addMessage = () => {
    const messages = [...this.state.messages];
    messages.push(Math.random());
    this.setState({ messages });
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.addMessage}>add message</button>
        <ul>
          {
            this.state.messages.map((m, i) => <MsgItem key={i} msg={m} />)
          }
        </ul>
      </div>
    );
  }
}