title: React function components re-renders when anything changes
body: <p>This react stuff is driving me nuts, I don't recall having these issues long ago with class components when I worked on react native. There must be something I'm doing wrong here, this is one of the problems I'm having, I have another component that also has a similar problem. I am new the new hook system, even reading on some stuff I'm still not very clear.</p>
  <p>I'm running into some problems with local states and redux states that are causing my dialog to flicker. Every time the parent component set the log state in that loop, the dialog would close and open. (so in this case, 100 times depending on the loop length) It is getting re-rendered every time the state gets updated.</p>
  <p>libraries react/redux/redux-thunk/material-ui</p>
  <p>Sample Code</p>
  <pre><code>function ToolbarModal(props){
   const [progressLog, setProgressLog] = useState(&quot;&quot;);
  
   const openProgressDialog = useSelector(getOpenProgressDialog);
   const handleCloseLongProgressDialog = () =&gt; {
     dispatch(handleOpenBatchRouteProgressDialog(false))
   }
  
   const handleSomeLogic = () =&gt; {
    for(let i=0; i&lt;0; i++){
      //The real one is concated with prev message
     setProgressLog(&quot;SAMPLE MESSAGE&quot;)
    }
   }
  
   return (
    &lt;div&gt;
     &lt;LongProgressDialog
       open={openProgressDialog}
       onClose={handleCloseLongProgressDialog}
       onEntered={handleSomeLogic}
       log={progressLog}
     /&gt;
    &lt;/div&gt;
   )
  }
  </code></pre>
  <p>The log prop gets passed to the child component using material-ui's dialog component and just displayed in a textfield.</p>
  <pre><code>function LongProgressDialog(props){
      const {open, onClose, onEntered, log} = props
  
      return (
          &lt;Dialog
              open={open}
              onClose={onClose}
              onEntered={onEntered}
              maxWidth='sm'
              fullWidth
          &gt;
              &lt;DialogTitle&gt;Long Progress&lt;/DialogTitle&gt;
              &lt;DialogContent&gt;
                  &lt;TextField 
                   multiline
                   fullWidth
                   rows={10}
                   rowsMax={10}
                   variant='outlined'
                   disabled
                   value={log}
                   /&gt;
              &lt;/DialogContent&gt;
          &lt;/Dialog&gt;
      )
  }
  </code></pre>