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 では、リポジトリのファイル、テスト、エントリーポイントが指定されていません。まず、react.dev で非同期に読み込まれるデータを使用する制御されたフォームをドキュメント化すべきかどうかを明確にし、意図するガイダンスを定義してください。完了条件は、説明されている React と Redux のシナリオに答えるドキュメントです。