title: How can I improve the react performance if I have many text inputs (Hooks) in a form?
body: <h1>The Problem</h1>
  
  <p>I have a form to send data through a api rest in React, the render and the writing on the form is very slow when I have about 80 text fields.</p>
  
  <p>I'm using functional components with hooks to handle the input texts and Material-UI as UI framework.
  In a first try, I had a currying function to handle the values:</p>
  
  <p><code>setValue = (setter) =&gt; (e) =&gt; { setter(e.target.value) }</code></p>
  
  <p>But the render process was really slow (because I was creating a function in every render), So I send the setter function as a prop,  then it improves a little but not enough.</p>
  
  <p>Actually the input response when I write a key in any input, it's about 500 ms.</p>
  
  <p><strong>What can I do to get a better performance?</strong></p>
  
  <p>The code was simplified for understanding purposes.</p>
  
  <h1>Sample code below:</h1>
  
  <pre class="lang-js prettyprint-override"><code>const [input1, setInput1] = useState('')
  const [input2, setInput2] = useState('')
  const [input3, setInput3] = useState('')
  .
  .
  .
  const [input80, setInput80] = useState('')
  
  // render the Inputs
  &lt;Input value={input1} setter={setInput1} text="Some label text" /&gt;
  &lt;Input value={input2} setter={setInput2} text="Some label text" /&gt;
  &lt;Input value={input3} setter={setInput3} text="Some label text" /&gt;
  .
  .
  .
  &lt;Input value={input80} setter={setInput80} text="Some label text" /&gt;
  
  </code></pre>
  
  <p>My Input components:</p>
  
  <pre class="lang-js prettyprint-override"><code>const Input = ({
    value, setter, text, type = 'text'
  }) =&gt; {
    const handleChange = (e) =&gt; {
      const { value: inputValue } = e.target
      setter(inputValue)
    }
    return (
      &lt;Grid&gt;
        &lt;TextField
          fullWidth
          type={type}
          label={text}
          value={value}
          onChange={handleChange}
          multiline={multiline}
        /&gt;
      &lt;/Grid&gt;
    )
  }
  </code></pre>
  
  <p>All input values are must be in a component because I'm need to send them to a server with axios.</p>