Где должно находиться состояние сложной регистрационной формы в React.js?

Question

У меня есть сложная форма настройки регистрации транспортного средства, родительский объект выглядит

vehicle{
  registrationNumber: "MH1234",
  type: "xyz"
  driver:{
    user:{
      firstName: xyz,
      lastName: abc,
      email: xyz,
      phone: 1234,
      city: random
    },
    kyc:{
      method:xyz,
      id: abcd
    },
  },
  owner:{
    user:{
      firstName: xyz,
      lastName: abc,
      email: xyz,
      phone: 1234,
      city: random
    },
    kyc:{
      method:xyz,
      id: abcd
    },
  }
}

как мне управлять своим состоянием такой вложенной формы

Компонент Heirarchy

Компонент heirarchy выглядит примерно так

VehicleRegistration

• Сохраняет все состояние формы в указанном выше объекте и передает его дочерним элементам как реквизиты

имеет следующих детей

• VehicleDetails - хранит информацию о транспортном средстве

• OwnerDetails - хранит информацию о владельце

  • UserDetails - хранит пользовательскую часть владельца
  • KycDetails - хранит пользовательскую часть владельца

• DriverDetails - хранит информацию о драйвере

  • UserDetails - хранит пользовательскую часть драйвера
  • KycDetails - хранит kyc-часть драйвера

как мне подходить к управлению состоянием такихПрямо сейчас я передаю функции onChange в качестве подпорки родительскому элементу, и родительское состояние изменяется на каждом keyStroke, что также является проблемой для производительности, поскольку вся форма перерисовывается при каждом нажатии клавиши

У меня естьдоступ к глобальной библиотеке управления состояниями, такой как кэш-память apollo-client и redux

Я попытался выровнять состояние, но это приводит к модели водопада, в которой я должен передавать реквизиты все дальше и дальше вниз

ниже приведен код, который поможет вам лучше понять поток

<VehicleOwner
  onChange={(owner, error) => {
    const { errors } = this.state;
    errors.owner = error;
    this.setState({
      owner,
      errors,
      isSubmitable:
        countLeaves(err) === 0 &&
        countLeaves(owner) > 0 &&
        countLeaves(driver) > 0 &&
        countLeaves(vehicle) > 0
          ? true
          : false
    });
  }}
  owner={this.state.owner || {}}
  errors={this.state.errors.owner || {}}
/>

inside the owner:

 <UserDetails
  getUserDetails={(user, error) => {
    const { owner, errors, onChange } = { ...this.props };
    owner.user = user;
    errors.user = error;
    onChange(owner, errors);
  }}
  values={this.props.owner.user || {}}
  errors={this.props.errors.user || {}}
/>

<KycDetails
  onChange={(kyc, error) => {
    const { owner, errors } = this.props;
    owner.kyc = kyc;
    errors.kyc = error;
    this.props.onChange(owner, errors);
  }}
  values={this.props.owner.kyc || {}}
  errors={this.props.errors.kyc || {}}
/>

 <LicenceDetails
  onChange={(licence, error) => {
    const { owner, errors } = this.props;
    owner.licence = licence;
    errors.licence = error;
    this.props.onChange(owner, errors);
  }}
  values={this.props.owner.licence || {}}
  errors={this.props.errors.licence || {}}
/>


and finally inside one of these components is individual textinputs which are a wrapper around html input

 <TextInput
  name="idNumber"
  label="licence Number"
  labelInfo="*"
  helperText={errors.idNumber || ''}
  intent={errors.idNumber && 'danger'}
  onInputChange={this.handleInput}
  value={values.idNumber}
/>

Any help will be greatly appreciated