Рассмотрим следующий код:
mapStateToProps = (state) => ({
currentUser: {
id: state.currentUserId, role: state.currentRole
}
})
Приведенный выше пример всегда будет возвращать новый объект для currentUser
и заставит компонент выполнить повторную визуализацию. Та же идея применима к возврату нового массива (например, с помощью map, filter, concat) и анонимных функций.
Либо передайте идентификатор и роль как плоские свойства:
mapStateToProps = (state) => ({
currentUserId: state.currentUserId,
currentUserRole: state.currentRole
})
Или используйте селектор, который возвращает currentUser
из состояния:
mapStateToProps = (state) => ({
currentUser: selectCurrentUser(state)
})
Обратите внимание, что передача анонимной функции также создаст новую ссылку. Поэтому старайтесь избегать такого кода, если вам нужен производительный компонент:
<MyComp onEvent={ () => this.doSomething() } otherProps={ ... }/>
Анонимная функция () => doSomething()
будет иметь другую ссылку каждый раз, когда мы визуализируем MyComp, и заставит его повторно отображать, даже если это чистый компонент (компонент, который повторно отображает только при изменении состояния или свойств).
В качестве альтернативы вы можете передать предварительно связанную функцию, которая инициализируется только один раз:
bindedEventCallback = () => {}
render() {
return <MyComp
onEvent={ this.bindedEventCallback }
otherProps={ ... }/>;
}
Или используйте хук useCallback
, который запоминает обратный вызов:
myComp() {
const bindedEventCallback = useCallback(() => {});
return <MyComp
onEvent={ bindedEventCallback }
otherProps={ ... }/>;
}
Все статьи из этой серии:
https://medium.com/@adamklein_66511/redux-bad-practices-1-lists-as-arrays-9115ba87b0ce
https://medium.com/@adamklein_66511/redux-bad-practices-2-duplicate-code-9f2f3d774d4d
https://medium.com/@adamklein_66511/redux-bad-practices-3-nested-state-6eebf1a410df
https://medium.com/@adamklein_66511/redux-bad-practices-5-duplicate-state-996d259758e3
https://medium.com/@adamklein_66511/redux-bad-practices-6-new-objects-on-the-fly-c38b503948a5
https://medium.com/@adamklein_66511/redux-bad-practices-7-mix-ui-state-with-model-data-cdca6c8d8fd9
Первоначально опубликовано на 500tech.com.