альтернатива формы создания и обновления без использования локального состояния

Вариант использования моей формы заявки, скажем, у меня будет форма для заполнения. Когда форма заполнена, заполненные данные должны сохраняться даже после обновления страницы. Не будет никакой кнопки редактирования и всего. Заполненные данные всегда будут отображаться в соответствующем поле. Для этого я сделал следующее. Я не уверен, что это хороший способ или нет, и мне нужно предложить улучшения, которые можно сделать

Вот что я сделал

Это родительский компонент

Что я здесь сделал, есть начальное состояние, которое будет обновляться, когда пользователь заполняет значение из handleChangeсобытия и затем будет передан этому объекту componentDidMount на сервер. Теперь, когда пользователь обновляет страницу, loadCompanyзапускает getDerivedStateFromPropsфункцию, которая извлекает этот объект компании с сервера, а затем сохраняет в редукторе getCompany, который я проверил Company. Если есть данные, обновите локальное состояние, потому что в Companyкомпоненте передается это значение.

const initialState = {
  company_name: '',
  website: '',
  industry: '',
  number_of_employees: '',
  phone_number: '',
  founded: '',
  address: '',
  city: '',
};

const mapStateToProps = (state) => {
  const { company } = state.profile.companyReducer;
  return {
    getCompany: state.profile.companyReducer,
    initialValues: company && company.records,
  };
};

const mapDispatchToProps = dispatch => ({
  loadCompany: () => dispatch(loadCompany()),
  saveCompany: companyData => dispatch(saveCompany(companyData)),
});

class ParentCompany extends React.Component<{
  saveCompany: Function,
  loadCompany: Function,
  getCompany: Object,
  reset: Function,
}> {
  state = {
    company: initialState,
    isUpdating: true,
  };

  componentDidMount() {
    this.props.loadCompany();
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const { company } = nextProps.getCompany;
    if (company && company.records !== undefined && prevState.isUpdating) {
      const { records } = company;
      return {
        company: records,
        isUpdating: false,
      };
    }
    return null;
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ company: { ...this.state.company, [name]: value } });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.saveCompany(this.state.company);
  };

  render() {
    const { getCompany } = this.props;
    return (
      <div>
        <Company
          success={getCompany.success}
          company={this.state.company}
          handleChange={this.handleChange}
          handleSubmit={this.handleSubmit}
          reset={this.props.reset}
        />
      </div>
    );
  }
}

const requiredFields = {
  company_name: 'Company Name',
  website: 'Website',
};

const withReduxForm = reduxForm({
  form: 'companyForm',
  fields: requiredFields,
  validate,
  destroyOnUnmount: false,
  enableReinitialize: true,
})(ParentCompany);

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(withReduxForm);

вот компонент компании

const Company = ({
  company,
  success,
  handleChange,
  handleSubmit,
  reset,
}: {
  company: Object,
  success: Object,
  handleChange: Function,
  handleSubmit: Function,
  reset: Function
}) => (
  <React.Fragment>
    <FormHeadline headline="Company" weight="400" />
    <Wrapper>
      <Toaster />
      <GridContainer container spacing={24}>
        <StyledForm autoComplete="off" onSubmit={handleSubmit}>
          <FormWrapper>
            <Field
              id="company_name"
              name="company_name"
              type="text"
              label="Company Name"
              className="input-field"
              value={company.company_name}
              onChange={handleChange}
              component={GTextField}
              required
              margin="normal"
            />
            <Field
              id="website"
              name="website"
              type="text"
              label="Website"
              placeholder="Website"
              className="input-field"
              value={company.website}
              onChange={handleChange}
              component={GTextField}
              required
              margin="normal"
            />
            <ButtonGrid>
              <LoadingButton
                variant="raised"
                marginRight
                radius="2px"
                success={success && success}
              />
              <TransparentButton
                variant="raised"
                radius="2px"
                type="button"
                onClick={reset}
              >
                Cancel
              </TransparentButton>
            </ButtonGrid>
          </FormWrapper>
        </StyledForm>
      </GridContainer>
    </Wrapper>
  </React.Fragment>

Мое намерение состоит в том, чтобы узнать другие способы сделать одну и ту же работу лучше от экспертного сообщества.