излишне перерисовывать весь компонент

Question

проблема заключается в следующем:

это то, что у меня есть в моей редукской утке

export const myInit = () => (dispatch, getState) => {
   db.ref(`/parts/`).on(
       'value',
        (snapshot) => 
(dispatch(getParts(mapObjectToArray(snapshot.val())))))
}

export const addAmount = (objecter) => (dispatch, getState) => {
let findKey = getState().partsState.parts.find(x => {
    if (x.part === objecter)
        return x.key
})
let xAmount

getState().partsState.parts.find(x => {
    if (x.part === objecter)
        return xAmount = x.amount
})
db.ref(`/parts/${findKey.key}/amount`).set(xAmount + 1)

}

myInit () вызывается один раз в магазине, поэтому детали сохраняются в состоянии.

Я отображаю эти детали в моем компоненте в виде таблицы. В каждой строке есть название части, сумма и кнопка для изменения количества частей. Как только вы нажмете кнопку, сумма данной части изменится. Кажется, все работает нормально, если только изменение количества не вызывается, когда части фильтруются с состоянием входного значения.

Когда список фильтруется, а количество деталей изменяется, весь компонент перерисовывается. Поле поиска очищается и список расширяется. Я не знаю что делать Пожалуйста, скажите мне, что мне не хватает.

компонент:

class ListOfParts extends Component {
state = {
    basicSearchInput: '',
    ITEMS_PER_PAGE: 10,
    currentPage: 0,
    parts: []
}

setStateForSearch(event) {
    this.setState({basicSearchInput: event.target.value})
}


render() {
    let myArrayForState = ['actuator', 'back_plate']

    let arrayForHeadings = ['Actuator', 'Back plate'
    ]

    let parts = this.props.parts;
    const filter = parts
        .filter(part => {
                return (part.part.toLowerCase().includes(this.state.basicSearchInput.toLowerCase()))
                    || (part.group.toLowerCase().includes(this.state.basicSearchInput.toLowerCase()))
            }
        )

    const numberOfParts = filter && filter.length

    return (
        <div>
           <TextField
               type={"search"}
               value={this.state.basicSearchInput}
                onChange={event => this.setStateForSearch(event)}
           />
           <RaisedButton
                onClick={this.handleOpen}
           >
           add
           </RaisedButton>

            <Row>
                <table>
                    <tbody>
                    {filter && filter.length ?
                        filter.filter((el, i) => {
                            return (i >= this.state.ITEMS_PER_PAGE * this.state.currentPage
                                &&
                                i < this.state.ITEMS_PER_PAGE * (this.state.currentPage + 1))
                        }).map((partInStateArray, index) =>
                             <tr id={`${partInStateArray.part}`}
                                 key={`${partInStateArray.part}${this.props.index}`}>
                                 <td>{this.arrayForHeadings[this.myArrayForState.indexOf(partInStateArray.group)]} {partInStateArray.part}</td>
                                 <td>{partInStateArray.amount}</td>
                                 <td>
                                     <button onClick={this.add}>+</button>
                                 </td>
                              </tr>)
                        )
                        : 'loading'
                    }
                    </tbody>

                </table>
            </Row>
            <div style={{textAlign: 'center'}}>
                <Pagination
                    total={Math.ceil(numberOfParts / this.state.ITEMS_PER_PAGE)}
                    current={this.state.currentPage + 1}
                    display={10}
                    onChange={newPage => this.setState({currentPage: newPage - 1})}
                />
            </div>
        </div>
    )
}
}


const mapStateToProps = state => ({
parts: state.partsState.parts,
})

const mapDispatchToProps = dispatch => ({
addAmount: (objectToAdd) => dispatch(addAmount(objectToAdd)),
})

export default connect(
mapStateToProps,
mapDispatchToProps
)(ListOfParts)