reactjs - React input onChange renders all components working so slow -

i have react + redux application , running webpack. in application have small components developed me. in cases should render grid kind of components hundreds of data. reasons can not use paging. , when user clicks edit button on grid line item open small dialog. in window have input text element , if user edits input elements value each key down causes render page data , components. each keypress there lag 1 second. how can deal this?

i not using , devtools problem rendering of components need time. in case normal think. can not remove onchange input because become readonly. have tried use defaultvalue fill props after render component because data coming api.

code

        geteditsubwindow(){                         var griddata = this.props.stocks.filter(s=>{ return s.isselected; });                       var windowcommandbuttons=[            {text:'cancel', classname:'cancel', onclick:null },            {text:'save', classname:'save', onclick:null }          ];                  return (              <window                   header="details"                     windowbuttons={['close']}                   candock={false}                  isdialog={true}                  onclose={::this.hideeditsubwindow}                   >                  <panel header="details">                                        <input type="text" placeholder="information" value={this.props.currentdata.name} onchange={::this.setinformation} onblur={::this.saveinformation} />                                 <input type="text" placeholder="information" defaultvalue={this.props.currentdata.name}  onblur={::this.saveinformation} />                                           </panel>                                     {this.getgrid(griddata)}              </window> );      }                               setinformation(event){          this.props.currentdata.name= event.target.value;        this.props.actions.informationchanged(this.props.currentdata, event.target.value);        }              saveinformation(event){        this.props.actions.saveinformation(this.props.currentdata, event.target.value);      }                render(){                return   (           <div classname="stocks">              {this.getgrid(this.props.stocks)}              {this.state.showeditsubwindow?this.geteditsubwindow():null}           </div>        )      }                                                                                          actions        export function requeststocklist() {      return (dispatch) => {         stock.getall()          .then(data => {dispatch(receivestocklist(data.stock));  } )          .catch(error => { console.log(error) });       }  }      export function saveinformation(info) {      return (dispatch) => {         information.save(info)          .then(data => {dispatch(receivecurrentdata(data.information));  } )          .catch(error => { console.log(error) });       }  }  export function informationchanged() {      return (dispatch) => {         dispatch(receivecurrentdata(data.stock));       }  }      export function receivestocklist(stocklist) {    return {      type: receive_stocklist,      stocklist    };  }    export function receivecurrentdata(currentdata) {    return {      type: currentdata_changed,      currentdata    };  }                                                                  reducer      const initialstate =  {     stocklist:[],     currentdata:{}  };    export default function stockreducer(state = initialstate, action) {                var newstate = object.assign({}, state);    switch (action.type) {            case actions.receive_stocklist:           newstate.stocklist=action.stocklist;         break;          case actions.currentdata_changed:           newstate.currentdata=action.currentdata;          break;            default:        break;              }          return newstate;      }