Render Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

user_16680373 0
Viewed 181

I am a student trying to learn react-native for school. I've encountered this error. Any idea how to fix this error?

'Too many re-renders. React limits the number of renders to prevent an infinite loop'.

My code:

import React, {useState} from 'react';
import Icon from 'react-native-vector-icons/dist/MaterialIcons';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

const App = () => {
  let [count, setCount] = useState(0);
  setCount(0);

  function onPressIncrease() {
    count++
  }
  function onPressDecrease() {
    count--
  }

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar />
      <View style={styles.container}>
        <Text style={styles.titleText}>{count}</Text>
        <View
          style={{
            flexDirection: 'row',
          }}>
          <TouchableOpacity onPress={onPressIncrease}>
            <View>
              <Icon name="add" size={24} color="black" />
            </View>
          </TouchableOpacity>
          <View style={styles.emptySpace} />
          <TouchableOpacity onPress={onPressIncrease}>
            <View>
              <Icon name="remove" size={24} color="black" />
            </View>
          </TouchableOpacity>
        </View>
        <StatusBar />
      </View>
    </SafeAreaView>
  );
};

export default App;

All help is very much appreciated!

react-native
4 Answers

Just remove the setCount(0) in the beginning of your component right after let [count, setCount] = useState(0);

The reason is that after changing the state of the component React immediately re-renders the component. So after firs mount, on the second line you are setting the counter to 0 setCount(0) at this point React knows that the state is changed and makes the second render of the component. When rendering second time the same second ling with setCount(0) is triggered and another re-render is invoked by react.

Second issue is that you are changing the counter directly in onPressIncrease and onPressDecrease functions (count++ and count-- respectively). You have to replace this lines with setCount(prev => ++prev) and setCount(prev => --prev) respectively)

user_91768870

I can see two issues with this component.

Firstly you are setting the count to 0 on mount, which is causing your component to rerender (react mounts the component, sets the count to 0 which calls a rerender of the component, which sets the count to 0...).

Also, your onPressX functions are mutating state directly. They need to call setCount with a new value. e.g. setCount(count + 1), or setCount(previousCount => previousCount + 9001)

user_80946950

Remove the line

setCount(0)

no need to use setCount as you are already passing default value to useState(0)

user_68904140

Hi there i have faced this issue many time this is the reson why yu getting this issue.

You have to call a onPress in the right manner from the component is rendring the function without calling it again and again.

you have to change onPress={onPressIncrease} to onPress={()=>onPressIncrease(}

user_111673770
Related