javascript - Good practices to improve React User Interface performance? -

i'm facing performance issue 1 of react application. there practices follow improve 'reactivity' of user interface.

i can instance reduce number of javascript in jsx conditions, such { carisred === true ? <redcar /> : <blackcar /> } of them required.

i'm using react-scrollbar-x display large tables , may impact overall performance of app.

are there other points focus on, improve performance in user interface?

here's part of component :

      {element.description.length > 0 ?         <popup           trigger={             <table.cell style={{ verticalalign:'middle', maxwidth: '100px', overflow: 'hidden', textoverflow: 'ellipsis', whitespace: 'nowrap' }}>               {(editproject === false) || (editproject === true && editprojectindex !== index) ?                 element.description                 : null}               {editproject === true && editprojectindex === index ?                 <form>                   <textarea                     autoheight                     placeholder='description'                     value={this.state.newprojectdescription}                     onchange={this.handlechangenewprojectdescription}                   />                 </form>                 : null}             </table.cell>           }           content={element.description}           basic         /> :         <table.cell style={{ verticalalign:'middle', maxwidth: '100px', overflow: 'hidden', textoverflow: 'ellipsis', whitespace: 'nowrap' }} negative={element.description.length === 0}>           {(editproject === false) || (editproject === true && editprojectindex !== index) ?             element.description             : null}           {editproject === true && editprojectindex === index ?             <form>               <textarea                 autoheight                 placeholder='description'                 value={this.state.newprojectdescription}                 onchange={this.handlechangenewprojectdescription}               />             </form>             : null}         </table.cell>       } 

here's component interface i'd improve rendering process

there package called react-virtualized large tables in react helps lot out render performance.

by looks of it, react-scrollbar-x using this.setstate() inside method called numerous of times. guessing cause of decreased performance

if you're using chrome there great extension visualize app's performance called react developer tools