Controlled form components with async data

This seems like a pretty common scenario when implementing forms with React+Redux but neither documentation nor any of the articles/answers online seem to provide full implementation/recommendation.

Here's the scenario

1. Data is loaded initially and passed to my <Form /> component.

class Form extends React.Component {
    constructor(props) {
        this.state = { nameField: props.name };
    }
    ...
}

2. Initial data is rendered on the screen and state is used to track user input, making this a fully controlled component.

render() {
    return(
        <form>
            <input value={this.state.nameField} onChange={e => this.setState({ nameField: e.target.value })} />
        </form>
    );
}

3. Data is then saved to the server asynchronously (here I'm using Redux but the same thing can be achieved with fetch, etc.):

handleSubmit(e) {
    e.preventDefault();
    const { dispatch } = this.props;
    dispatch(actions.saveData(...this.state);
}

4. Reducers handle successful data save and the new state is saved. This data is then once again passed to my <Form /> component as props because the redux state is my single source of truth.

I now should update my component's state to match the application state (in case there were some external changes done on the server or parent component). Since in this case "fresh" props should always overwrite the state, one would normally use componentWillReceiveProps to simply set the new state but that method is now deprecated. The other two methods available - componentDidUpdate and getDerivedStateFromProps - could work BUT there needs to be a deep comparison of new props vs old props done in order to determine if the change is due to "fresh" props or just the internal state update. This can get very expensive if my form has 30 fields because both of these methods fire on each re-render.

I am trying to figure out the best practice in this scenario - should I delegate user input changes to Redux and avoid using component's state altogether? Or the only way now to make sure that the state stays in sync with props is to do a deep comparison of new pros vs old props on each re-render? Or is there another approach I'm not thinking of that works better?

此 issue 未指定任何 repository 檔案、測試或進入點。首先釐清 react.dev 是否應記錄使用非同步載入資料的受控表單，並定義預期的指引；完成條件是提供能回答所述 React 和 Redux 情境的文件。