Рассмотрим следующий код:

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.