какой метод жизненного цикла React лучше всего подходит для выполнения вызовов API при изменении реквизита

Question

Мы используем версию React 16.8. Мне интересно, какой метод жизненного цикла лучше всего подходит для выполнения вызова API.

Типичное приложение, которое я использую. Он имеет список элементов в левой панели, и при щелчке элемента вид редактирования будет отображаться в правой панели. выбранный элемент слева передается в качестве опоры компоненту правой панели.

Просто просматривая документацию React, я понял, что больше не рекомендуется использовать ComponentWillRecieveProps, и вместо этого нам нужно использовать getDerivedStateFromProps, и мы должны просто вернуть новый объект, который необходимо обновить в состоянии. Но, в моем случае использования, мне нужно создавать API для каждого изменения реквизита и получать дополнительные сведения об этом предмете.

Не могли бы вы сообщить, какой метод жизненного цикла подходит для этого?

I tried updating the state in the right pane component with the props passed from the left pane.

async componentDidUpdate(prevProps) {
    if (prevProps.person!== this.state.initialValue) {
        this.setState({
            initialValue: this.props.person,
            editedPerson: Object.assign({}, this.props.person)
        });

        let abc= await this.props.getAbc(this.props.person.dS_KEY);
        this.setState({
            abc
        });
        // Since these are asynchronous and takes random time to finish, I would like them to render when they receive the response from API.
        let def= await this.props.getDef(this.props.person.dS_KEY);
        this.setState({
            def
        });
    }
}