Bonjour à tous,

Je suis en train de developper une application en temps réel avec les websockets.
Les donneés que je recois me permette de constituer un tableau html oû les cellules doivent se mettre à jour continuellement.
Mon probleme, est qu'a chaque fois que je recois une mise à jour d'une ligne de mon tableau alors react me rafraichit l'intergralité des lignes, ce qui detruit les performances. Comment dois je proceder ?

Lorsque je recois une mise à jour de donnée pour une ligne, je mets à jour mon array de données
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
 this.items[index][4] = stockItem[4];
 this.items[index][5] = stockItem[5];
 this.items[index][2] = stockItem[2];
 
 this.setState({
      quotes: this.items
    });
Puis je mets à jours mon tableau html
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
const itemsT = this.state.quotes.map((item, index) => (
      <div key={item["requestId"]}>
        <TableRow quote={item} />
        <br />
      </div>
    ));
Mais au lieu de mettre à jour uniquement la ligne concernée, avec la map toutes mes lignes sont continuellement mise à jour.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
class TableRow extends Component {
  render() {
    return (
      <div>
        {this.props.quote[4]} - {this.props.quote[2]} - {this.props.quote[5]}
      </div>
    );
  }
}
Comment dois je proceder ?

Merci pour vos avis