Slow with arrays and ES6 classes.

[tomitrescak]

Not sure what is going on, but when I bind to arrays the updates are extremely slow ()max 1-2 per second!. Do you have any idea what can be wrong?

export class ScheduleAdminView extends React.Component<Component, State> {
  constructor(props: Component) {
    super();
    this.state = {
      schedule: props.scheduleData.schedule
    };
  }

  render() {
    const schedule = scheduleData.schedule;
    const bind = Binder.bindToState.bind(null, this, 'schedule');

    return (
      <div>
        <form className={'ui form ' + clear} onSubmit={handleSubmit(save)}>
          <Segment>
            <SchedulePracticals model={Binder.bindArrayToState(this, 'schedule', 'items')} createPractical={createPractical} />
          </Segment>
        </form>
      </div>
    );
  }

export const SchedulePractical = ({ index, field }) => (
  <Form.Group key={index}>
    <Input model={Binder.bindTo(field, 'name')} width={9} />
  </Form.Group>
);

export const SchedulePracticals = ({model, allPracticals, createPractical }: ISchedulePracticalProps) => {
  let index: number;
  let field: string;
  return (
    <div>
      <For each="field" of={model.items} index="index">
        <SchedulePractical index={index} field={field} />
      </For>
    </div>
  );
};

[tomitrescak]

To clarify, this simple form works pretty much ok, but if I olny add few other controls to Schedule Practical, the performance goes down very fast.

export const SchedulePractical = ({ index, field }) => (
  <Form.Group key={index}>
    <Input model={Binder.bindTo(field, 'name')} width={9} />
    <Input model={Binder.bindTo(field, 'name1')} width={9} />
    <Input model={Binder.bindTo(field, 'name2')} width={9} />
    <Input model={Binder.bindTo(field, 'name3')} width={9} />
  </Form.Group>