redux unnecessarily rerenders whole component - reactjs

Question

the problem is as follows:
this is what i have in my redux duck
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() is called once in the store so the parts are saved in the state.
I display those parts in my component in a table. In each tr there is a name of part, amount and a button to change amount of parts. Once you click the button, the amount of the given part changes. Everything seems to be working just fine unless, the amount change is called when parts are filtered with state of an input value.
When list is filtered, and amount of part is changed, the whole component rerenders. Search field is cleared and the list extends. I don't know what to do. Please tell me what am I missing.
the component:
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)