React function components re-renders when anything changes

Question

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.

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.

libraries react/redux/redux-thunk/material-ui

Sample Code

function ToolbarModal(props){
 const [progressLog, setProgressLog] = useState("");

 const openProgressDialog = useSelector(getOpenProgressDialog);
 const handleCloseLongProgressDialog = () => {
   dispatch(handleOpenBatchRouteProgressDialog(false))
 }

 const handleSomeLogic = () => {
  for(let i=0; i<0; i++){
    //The real one is concated with prev message
   setProgressLog("SAMPLE MESSAGE")
  }
 }

 return (
  <div>
   <LongProgressDialog
     open={openProgressDialog}
     onClose={handleCloseLongProgressDialog}
     onEntered={handleSomeLogic}
     log={progressLog}
   />
  </div>
 )
}

The log prop gets passed to the child component using material-ui's dialog component and just displayed in a textfield.

function LongProgressDialog(props){
    const {open, onClose, onEntered, log} = props

    return (
        <Dialog
            open={open}
            onClose={onClose}
            onEntered={onEntered}
            maxWidth='sm'
            fullWidth
        >
            <DialogTitle>Long Progress</DialogTitle>
            <DialogContent>
                <TextField 
                 multiline
                 fullWidth
                 rows={10}
                 rowsMax={10}
                 variant='outlined'
                 disabled
                 value={log}
                 />
            </DialogContent>
        </Dialog>
    )
}

Answer 1

gu mingfeng has answered his in his comment. Just use a forward ref fixed my problem, this is technically what I have been looking for the entire time and didn't know it existed.

if anyone needs it, just follow the doc of forward ref from the react docs and it's very straightforward.