React input onChange renders all components working so slow

Question

I have a React + Redux application and running with webpack. Currently in my application i have some small components developed by me. In some cases we should render Grid kind of components with hundreds of data. For some reasons i can not use paging. And when user clicks to edit button on my grid line item this will open a small dialog. In that window i have an input text element and if user edits input elements value for each key down this causes render all my page with all data and components. So for each keypress there is a lag about 1 second. How can i deal with this?

I am not using and DevTools My problem is rendering of my components need time. But in this case this is normal i think. I can not remove onChange from my input because it will become readonly. I have tried to use defaultValue but i will fill my props after render my component because that data coming from an 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>
      )
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    MY 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
  };
}


    
  
  
  
  
  
  
  
  
  
  
  
  
  
  MY 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;
  
}