A large (ish) application that edits a lot of content

Question

I am working on an application that includes many inputs that are part of one big data tree.

The data looks something like this:

data: {
  input_1: "Text",
  input_2: "etc",
  ...
  input_n: "foo"
}

Each input component receives as a support a key for placing the data that it should display and change ( <InputComponent data={data['input_1']} objectKey={'input_1'} onChange={this.updateData} />).

There is some verification that occurs inside the component itself, but is mostly this.onChangediscarded and called when the text changes.

I handle onChange in a way similar to this:

onChange = (newInput, objectKey) => {
  const {data} = this.state;

  const newData = {
    ...data,
    [objectKey]: newInput
  };

  this.setState({
    data: newData
  });
};

I will notice some slowdowns and lags when updating records. This is at least as far as I understand, because every component that is “tied” to this data is a re-render.

? , ? , , /.

Answer 1

, , .

InputComponent PureComponent . PureComponent state. InputComponent state , shouldComponentUpdate .

onChange , debounce props.onChange

onChange(val) {
  this.setState(val);
  debounce(this.props.onChange(val));
}

, , InputComponent.