Tengo un componente ProgressBar para obtener el progreso. Me suscribo a dos eventos diferentes porque el usuario sube dos archivos diferentes. Cada evento devuelve el progreso de carga de cada archivo y luego combino estos dos progresos en uno solo y se lo muestro al usuario.

La pregunta es: tengo un useEffect que escucha estos otros dos progresos y cuando se actualizan, actualizo el progreso "final" sumando los valores o multiplicando por 2 si solo hay una fuente de progreso (porque el usuario puede subir solo un archivo). ¿Está bien usar useEffect así?

Código de componente:

 const ProgressBar = () => { const [progressVideo, setProgressVideo] = useState(0); const [progressData, setProgressData] = useState(0); const [progress, setProgress] = useState(0); useEffect(() => { window.electron.api.globals.ipcRenderer.on( "recorder:source1", (evt, message) => { console.log("message1 ", message.percent); setProgressVideo(message?.percent / 2); } ); window.electron.api.globals.ipcRenderer.on( "recorder:source2", (evt, message) => { console.log("message2 ", message.percent); setProgressData(message?.percent / 2); } ); }, []); useEffect(() => { if (isNaN(progressVideo) && isNaN(progressData)) return; const isSingleSourceVideo = isNaN(progressData); if (isSingleSourceVideo) { setProgress(progressVideo * 2); } else { setProgress(progressVideo + progressData); } }, [progressVideo, progressData]); return ( <div id={styles.progressBarWrapper}> <div id={styles.progressBarBackground}> <p>{parseInt(progress)}%</p> </div> <div id={styles.progressBar} style={{ width: parseInt(progress) + "%" }} ></div> </div> ); };