Slowdown: Changes to a field inside a FieldGroup triggers a complete rerender of the entire FieldGroup

[huidini]

Hey,

I discovered a possible issue.

When putting a huge amount of fields into a FieldGroup the library slows down significantly. It appears that every change to any component connected to the FormContext such as Input inside a FieldGroup triggers a complete rerender of the entire FieldGroup. I do not know if this is intend or not, but I created a small demo in codesandbox nonetheless to demonstrate the issue.

Best Regards,
Huidini

If the codesandbox gets deleted, here is the code:

import React, { useState } from "react";
import { Form, Input, FieldGroup } from "react-ocean-forms";
import "./styles.css";

function ValueChanger({ initial, onChange }) {
  return (
    <Form
      onSubmit={values => {
        onChange(parseInt(values.fields, 10));
      }}
    >
      <Input name="fields" label="Number of fields" value={`${initial}`} />
      <button type="submit">Change</button>
    </Form>
  );
}

function Block({ title, children }) {
  return (
    <fieldset className="block">
      <legend>{title}</legend>
      {children}
    </fieldset>
  );
}

function NoFieldGroup({ numberOfFields }) {
  return (
    <Block title={`${numberOfFields} fields without a FieldGroup`}>
      <>
        {[...Array(numberOfFields).keys()].map(k => (
          <Input
            key={`regular${k}`}
            name={`regular${k}`}
            label={`Value ${k}`}
            value=""
            style={{ fontWeight: "bold" }}
          />
        ))}
      </>
    </Block>
  );
}

function WithFieldGroup({ numberOfFields }) {
  return (
    <FieldGroup
      name="group"
      label=""
      render={() => (
        <Block title={`${numberOfFields} fields in a FieldGroup`}>
          <>
            {[...Array(numberOfFields).keys()].map(k => (
              <Input
                key={`value${k}`}
                name={`value${k}`}
                label={`Value ${k}`}
                value=""
              />
            ))}
          </>
        </Block>
      )}
    />
  );
}

function FormExample() {
  const [numberOfFields, setNumberOfFields] = useState(100);
  return (
    <div style={{ padding: "1rem" }}>
      <Form>
        <ValueChanger initial={numberOfFields} onChange={setNumberOfFields} />
        <NoFieldGroup numberOfFields={numberOfFields} />
        <WithFieldGroup numberOfFields={numberOfFields} />
      </Form>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>FieldGroup Slowdown Showcase</h1>
      <FormExample />
    </div>
  );
}

.App {
  font-family: sans-serif;
}

.block {
  height: 200px;
  overflow: scroll;
  margin-top: 1rem;
}

.field-group {
  display: inline-block;
  margin: 0.2rem;
}