title: React partial render
body: <p>Let's take some trivial react component that have to render:
  <br/>
  1) text field (managed one, connected to state)
  <br/>
  2) list of tasks (map through array connected to state too)
  <br/>
  3) button, that adds new item to array from text field, when clicked
  <br/>
  <br/>
  <a href="https://stackblitz.com/edit/react-glpzqn?embed=1&amp;file=index.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-glpzqn?embed=1&amp;file=index.js</a>
  <br/></p>
  
  <p>when text field is updated(textChange event) => then state is updated => that force render(on each key press in text field).</p>
  
  <p>it's unwanted render, I only want to render when button is clicked, item is added to array and finally new list is rendered on a screen.</p>
  
  <p>so I want to force render only on item added to the list, and not when text is changed.</p>
  
  <p>some solutions that I can reveal are:
  <br/>
  1)  take input to another component so text change will not affect list rendering.
  <br/>
  2) change input field to unmanaged and retrieve text manually when button clicked.
  <br/></p>
  
  <p>I'm guessing if there is some more elegant solution without changing a component?
  may be by using some HOC or same?</p>