score:0

really slow down the application when i'm writing some text in input fields.

this is because you're tying the form's data to the rendering. it would be fine to store the whole form through redux as well (or wherever else you want), as long as you're not creating a dependency between the component's rendering lifecycle and those mutations in the form field's values.

does the whole form need to update on each individual components' events? not really. however, since the whole form is gathered in one big object, and that object's reference is changed after an update, then the whole component tree gets re-rendered.

to reduce the need for re-rendering, you can synchronize the data (note: the data, not the validations, etc...) outside of react, and only fetch it when you submit.

import react, { usestate } from "react";

const externalformdata = {};

function form() {
  return (
    <input
      onchange={function(ev) {
        externalformdata.input = ev.target.value;
      }}
    />
  );
}

export default function app() {
  const [formdata, setformdata] = usestate();
  return (
    <div>
      <form />
      <input
        type={"button"}
        onclick={function() {
          setformdata(externalformdata);
        }}
        value="submit form"
      />
      <p>{`submitted form is: ${json.stringify(formdata)}`}</p>
    </div>
  );
}

if that's your choice, i suggest looking for some existing form library which handles that for you (including validation and etc).

another idea would be decoupling this "big object" you mentioned into individual objects which gets updated separately, thus only triggering re-renders on the components affected by the value.


Related Query

More Query from same tag