Реагировать на собственные функции HOC и дублировать функции метода жизненного цикла

РЕДАКТИРОВАТЬ

Некоторый ваш код кажется мне немного странным:

export const LoggedInHOC = WrapperComponent => props => class

// Later
export default compose(
  LoggedInHOC(FeedScreen)
)(FeedScreen)

LoggedInHOC здесь есть функция, которая принимает компонент и возвращает функция, которая возвращает компонент, когда она, вероятно, должна быть только функцией, которая принимает компонент и возвращает компонент.

Я собираюсь предположить, что ваша роль LoggedInHOC состоит в том, чтобы проверить, подключен ли пользователь каким-либо образом, отобразить упакованный компонент, если это так, и перенаправить пользователя / показать форму входа в систему в противном случае.

Вы могли бы написать это так:

export const LoggedInHOC = Component => class extends React.Component {
  render () {
    // Check if the user is connected
    if (connected) {
      return (
        <Component
          {...this.props}
          />
      );
    }

    return <p>User not connected</p>;
  }
};

И вы бы обернули свой компонент таким образом

export default LoggedInHOC(Component);

// Or if you want to chain multiple hocs:
export default compose(
  LoggedInHOC,
  AnotherHOC
)(Component);

Теперь вернемся к вашему первоначальному вопросу о связывании нескольких HOC и componentDidUpdate жизненный цикл. Я не уверен, что именно является проблемой в вашем случае, но написание:

export default compose(
  HOC1,
  HOC2
)(Component);

эквивалентно HOC1(HOC2(Component)). Итак, с точки зрения композиции у вас есть:

HOC1
  HOC2
    Component

И вы должны иметь в виду, что когда обновляется ваша HOC1 оболочка, это вызовет обновление в вашем HOC2 и в Component но если вы обновите HOC2, это не приведет к обновлению вашего HOC1.

Я создал пример codepen, который отображает компонент, заключенный в несколько HOC, каждый из которых реализует ловушку componentDidUpdate