Solucionar error ‘Too many re-renders. React limits the number of renders to prevent an infinite loop.’ en React

Tiempo de lectura: < 1 minuto

Este error ocurre cuándo llamamos por ejemplo a un setEstado desde varios elementos a la vez.

Tomando de ejemplo el siguiente código:

const [posMenu, setPosicion] = useState(1);

...

<View style={styles.container}>
                    <Button style={[styles.boton]} mode="text" onPress={setPosicion(1)}  >Vídeos</Button>
                    <Button style={[styles.boton]} mode="text" onPress={setPosicion(2)}  >Foro</Button>
                    <Button style={[styles.boton]} mode="text" onPress={setPosicion(3)}  >Quiz</Button>
</View>
...

Los tres botones tienen asignados el método onPress con la función de setPosicion que va a cambiar la posición de la variable posMenu.

El problema viene en que cuando el render se devuelve o es retornado, se ejecuta setPosicion(1), setPosicion(2) y setPosicion(3).

Para evitar esto, tenemos que construir el código de esta forma:

<View style={styles.container}>
                    <Button style={[styles.boton]} mode="text" onPress={() =>setPosicion(1)}  >Vídeos</Button>
                    <Button style={[styles.boton]} mode="text" onPress={() =>setPosicion(2)}  >Foro</Button>
                    <Button style={[styles.boton]} mode="text" onPress={() =>setPosicion(3)}  >Quiz</Button>
                </View>

Y ahora solo se van a invocar cuándo pulsamos sobre ellas.