Estoy aprendiendo React Native y estoy trabajando en una aplicación. Pasé algunos días tratando de encontrar una manera de hacer esto:

Tengo una aplicación simple con botones. Necesito grabar audio y enviarlo a una API cada 5 segundos. (en el código verás 6 segundos)

Necesito darle al usuario la capacidad de detener el envío de audio, pensé que esto podría lograrse presionando botones para cambiar un estado que detendría la comunicación con la API.

Aquí está mi razonamiento.

 export default function App() { const [recording, setRecording] = React.useState(); ... const uploadAudio = async (path) => { const formData = new FormData() ... async function startStreamRec () { if (stream) { try { const repet= setInterval(async ()=> { await Audio.requestPermissionsAsync(); await Audio.setAudioModeAsync({ allowsRecordingIOS: true, playsInSilentModeIOS: true, }); const recording = new Audio.Recording(); await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY); await recording.startAsync(); setRecording(recording); console.log('Recording started'); console.log(disable); console.log('Stopping recording..'); setRecording(undefined); recording.stopAndUnloadAsync(); const uri = recording.getURI(); console.log('Recording stopped and stored at', uri); setPath(uri); uploadAudio(uri); }, 6000); } catch (err) { console.error('Failed to start recording', err); } } else { clearInterval(repet); } } async function stopStream() { setStream(false); startStreamRec(); } async function startStream() { setStream(true); startStreamRec(); } return ( <View> ... <TouchableOpacity onPress={startStream} style={styles.cathButton}> <Text> Start</Text> </TouchableOpacity> <TouchableOpacity onPress={ stopStream } style={styles.cathButton}> <Text> Stop </Text> </TouchableOpacity> ... </View> ); }

Sin embargo, este código no funciona correctamente.

Probé algunas cosas con useeffect, con ganchos de estado, mientras ciclos de settimeout, setState pero todo falló. Un error común que recibo es "error: demasiados renderizados. React limita la cantidad de renderizados para evitar un bucle infinito".

No sé qué estoy haciendo mal.