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?

L’issue ne mentionne aucun fichier du dépôt, test ou point d’entrée. Commencez par déterminer si react.dev doit documenter les formulaires contrôlés avec des données chargées de manière asynchrone et définir les recommandations attendues ; le résultat attendu est une documentation qui répond au scénario React et Redux décrit.