Estoy tratando de representar cada elemento en la matriz de roles . Este código funciona en el temporizador ( setInterval ) es el siguiente:

1. Asigna el valor duplicado del estado en la variable let prevRole y su índice correspondiente en la variable let prevRoleIndex .

2. Representa la cadena de caracteres aleatorios 10 veces de forma iterativa con un retraso de 50 ms.

3. Ahora, el siguiente elemento en la matriz de roles se asigna para let newRole , agregando +1 al previousRoleIndex y luego actualizando el estado con la variable newRole.

 import {useState, useEffect} from 'react' const roles = ['Web Developer & UX Designer', 'Software Developer / Engineer', 'Blockchain Developer', 'Data Anaylist/ Scientist'] export default function App() { const [role, setRole] = useState(roles[0]) const sleep = (value) =>{ return new Promise(r => setTimeout(r, value)); } const getRandomString = () =>{ return (Math.random()).toString(36).substring(2); } useEffect(() => { const timer = setInterval(async() => { console.log("Timer has started") let prevRole = role; let prevRoleIndex = roles.findIndex((ele)=>ele===prevRole) console.log("Previous Role State: "+ prevRole) for(let i=0; i<10; i++){ setRole(getRandomString()) await sleep(50) } prevRoleIndex = prevRoleIndex+1 >= roles.length? -1: prevRoleIndex let newRole = roles[prevRoleIndex+1] console.log("New Role State: "+ newRole) setRole(newRole) }, 3000); return () => clearInterval(timer); }, []); return( <div> <h1>{role}</h1> </div> ) }

El código funciona bien durante la primera iteración del temporizador y después de la segunda iteración, el estado no se actualiza.