React MUI ProgressBar not rendering on value change

Question

I have a functional component where I am using the MUI progress bar that I want to display but when the progress bar loads its still at the progress I set at the first step. Also I am calling an API and processing the results in one of the functions. What am I doing wrong ?

function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
    return (
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <Box sx={{ width: '100%', mr: 1 }}>
          <LinearProgress variant="determinate" {...props} />
        </Box>
        <Box sx={{ minWidth: 35 }}>
          <Typography variant="body2" color="text.secondary">{`${Math.round(
            props.value,
          )}%`}</Typography>
        </Box>
      </Box>
    );
  }

export const Search = (props) => {

    const { onSearchComplete } = props;

    const [msgBox, setMsgBox] = useState(null);
    const [loading, setLoading] = useState(false);
    const [progress, setProgress] = useState(10);
    const onSearch = async () => {

        setLoading(true);

        const emails = contacts
            .filter(x => x.isChecked)
            .map(item => item.emailAddress);
        
        setProgress(30); //this is where I am manually setting the progress. 

        try {
            const searchResults = await AppApi.search(emails);

            let userList = [];
            setProgress(70); // I want to manually set the percentage here 


            for (let i = 0; i < searchResults.length; i++) {
               //processing the list here 
            }


            onSearchComplete(userList); //passing on the results to another component
        } catch (err) {
            console.log({ err });
            setMsgBox({ message: `${err.message}`, type: 'error' });
        }

        setLoading(false);
    }

    useEffect(() => {
        onSearch();
      }, [progress]);


    return (
        <Box>
            
            {loading ?   <LinearProgressWithLabel value={progress} />:
            <Box>{msgBox && (<a style={{ cursor: 'pointer' }} onClick={() => setMsgBox(null)} title="Click  to dismiss"><MessageBox type={msgBox.type || 'info'}>{msgBox.message}</MessageBox></a>)}</Box>}


        </Box>
    );
}

Answer 1

At the moment, your useEffect hook has the wrong dependencies. onSearch looks like it has two dependencies that could change - contacts and onSearchComplete, so the effect hook should actually be written as:

useEffect(() => {
    onSearch();
}, [contacts, onSearchComplete]);

Depending on how onSearchComplete is defined, you might find that your effect re-runs more frequently than it should; you can either solve this by making onSearchComplete a callback:

const OtherComponent = () => {
    const onSearchComplete = useCallback(userList => {
        // ----- 8< -----
    }, [...]);
}

Or wrapping the callback in a ref -

const Search = ({ onSearchComplete }) => {
    const onSearchCompleteRef = useRef();
    onSearchCompleteRef.current = onSearchComplete;

    const onSearch = async () => {
        // ----- 8< -----
        onSearchCompleteRef.current(userList);
    }

    // Now you don't need onSearchComplete as a dependency
    useEffect(() => { 
        onSearch(); 
    }, [contacts]);
};

Edit

The reason you're not seeing the "updated" progress is because the processing of the results happens on the same render cycle as you updating the progress bar. The only way to get around that would be to introduce an artificial delay when you're processing the results:

setTimeout(() => {
    onSearchCompleteRef.current();
    setLoading(false);
}, 100);

I created a CodeSandbox demo to show this.