title: Optimize form rendering React
body: <p>How can i optimize 'form' rendering. For each key pressed, the component is rendered
  Any idea to solve or improve it?</p>
  
  <pre><code>const Example = () =&gt; {
    const [inputForm, setInputForm] = useState('');
    const inputHandler = event =&gt; {
      setInputForm(event.target.value);
    };
    console.log('Rendering');
  
    return (
      &lt;div&gt;
        &lt;div&gt;
          &lt;span&gt;Text: {inputForm}&lt;/span&gt;
          &lt;input value={inputForm} onChange={inputHandler} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/SCV0r.png" rel="nofollow noreferrer">log of component rendering</a>
  Thanks guys!</p>