javascript - How to improve react redux perfomance? -

i have component table many rows (50-100). there ability edit lines , type there text. lines stored in redux store. update store on every keypress , takes 1-1.5sec before typed character appeared in textarea. every line separate component.

the approximate structure bellow (but of course it's more complex)

@connect(store => {   return {     phrases: store.phrases   }; })  export default class tablecontainer extends react.component {  handlephraseupdate = value => {   // update redux store here   };  render() {   return this.props.phrases.map((phrase, index) => {     return (       <phrase         phrase={phrase}         onphraseupdate={this.handlephraseupdate}       />     )   })  } } 

how can refactor code?

when dealing large collections in redux, it's best factor code fewest components re-render when item in collection changes.

in current implementation, when phrase updated, tablecontainer receives whole new array of phrases , re-render of them, though 1 has changed.

by connecting phrase component , looking individual phrase each 1 result in single row updating when phrase updated.

it best use id of kind on values, example:

@connect((store, ownprops) => {     return {       phrase: store.phrases[ownprops.id]     }   })  export default class phrase extends react.component {   handlephraseupdate = value => {     // update redux store here     }    render() {     const { phrase } = this.props     // render phrase   } }  @connect(store => {   return {     // stored rather calculated each time     phrases: store.phrases.map(p => p.id)    }; })  export default class tablecontainer extends react.component {   render() {      return this.props.phrases.map((id) => {       return (         <phrase key={id} id={id} />       );     });   } } 

if don't have id can use index in array:

@connect((store, ownprops) => {     return {       phrase: store.phrases[ownprops.index]     }   })  export default class phrase extends react.component {   handlephraseupdate = value => {     // update redux store here     }    render() {     const { phrase } = this.props     // render phrase   } }  @connect(store => {   return {     phrasecount: store.phrases.length   }; })  export default class tablecontainer extends react.component {   render() {     const phrases = []     let index = 0      (let index = 0; index < this.props.phrasecount; index++) {       phrases.push(<phrase key={index} index={index} />)     }      return (       <div>         { phrases }       </div>     )   } } 

hope helps.