У меня есть компонент-функция React с дорогим побочным эффектом:
useEffect(() => {
doExpensiveSideEffect(reduxProp);
}, [reduxProp]);
reduxProp - это свойство, которое обслуживается извне через Redux-коннектор. На этот вопрос я надеюсь, что точное происхождение reduxProp не имеет значения.
Моя проблема в том, что doExpensiveSideEffect запускается чаще, чем необходимо.
- Он запускается после первый рендеринг, который в порядке.
- Он запускается всякий раз, когда
reduxProp получает переназначение, что тоже нормально. - Однако он также запускается после последующих рендеров, даже если
reduxProp этого не произошло изменить!
Это приводит к моему вопросу: Как я могу гарантировать, что doExpensiveSideEffect работает тогда и только тогда, когда reduxProp был переназначен, независимо от количества последующих рендеров?
РЕДАКТИРОВАТЬ:
Стоит отметить, что компонент заключен в компонент Router-Higher-Order-Component. Маршрутизация контролируется IonReactRouter-Component. Я предполагаю, что IonReactRouter генерирует несколько экземпляров одного и того же дочернего компонента, что может быть причиной root этой проблемы.
См. https://ionicframework.com/docs/react/navigation для получения дополнительной информации о IonReactRouter.
Кроме того, reduxProp передается через connect -функцию react-redux. Между ними пользовательский «селектор» используется для выбора reduxProp из глобального AppState. Следующий код демонстрирует путь от глобального AppState к вышеупомянутому useEffect:
const OuterComponent = withRouter(
connect<StateProps, DispatchProps, OwnProps, AppState>(
(state: AppState, ownProps: OwnProps) => ({
reduxProp: selectPartOfState(state, ownProps),
}),
{}
)(InnerComponent)
);
Now InnerComponent получает reduxProp в своих реквизитах и включает в себя вышеупомянутый useEffect.