Maximum update depth exceeded new state React-Native

Question

const [number,setNum] = useState(0); I get this error when I want to add and change it(setNum(number+1)). My Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. What can i to solve this?

const App = ()=>{
 const [text,setText] = useState('');
 const [todo,setToDo] = useState([]);
 const [number,setNum] = useState(0);
 const renderToDoCard = ({item})=>{
 setNum(number+1)
 return(
 <TouchableHighlight
 onLongPress={() => handleLongPress(item)}>
 <ToDoCard todo={item} number={number}/>
 </TouchableHighlight>
 )
 }
 const handleLongPress = item => {
 setToDo(todo.filter(i => i !== item));
 return Alert.alert('Silindi');
 };
 return(
 <SafeAreaView style={styles.container}>
 <StatusBar backgroundColor='#102027'/>
 <View style={styles.head_container}>
 <Text style={styles.title}>Yapılacaklar</Text>
 <Text style={styles.title}>{todo.length}</Text>
 </View>
 <View style={styles.body_container}>
 <FlatList data={todo} renderItem={renderToDoCard} />
 </View>
 <View style={styles.bottom_container}>
 <ToDoInput todo={todo} setToDo={setToDo} text={text} setText={setText}/>
 </View>
 </SafeAreaView>
 )
}

Answer 1

You've created an infinite update loop.

The problem is in how you're updating your number state inside renderToDoCard

const renderToDoCard = ({item}) => {
 setNum(number + 1); // This is the problem, remove this line
 return (
 <TouchableHighlight onLongPress={() => handleLongPress(item)}>
 <ToDoCard todo={item} number={number} />
 </TouchableHighlight>
 );
};

When renderToDoCard renders you update the state of your App component so it rerenders App which renders renderToDoCard which updates the state of your App component so it rerenders App which renders renderToDoCard...

This process repeats until the max update depth is reached.

Simply remove setNum(number + 1); and that problem is fixed.

It seems to me from your code that all you use your number state for is to keep track of the current item index so you can pass this to the ToDoCard component. The FlatList's renderItem also provides access to the current item index which you could pass to the number prop of ToDoCard

renderItem({ item, index, separators });

https://reactnative.dev/docs/flatlist#required-renderitem

So you could instead do something like this

const renderToDoCard = ({item, index}) => {
 return (
 <TouchableHighlight onLongPress={() => handleLongPress(item)}>
 <ToDoCard todo={item} number={index} />
 </TouchableHighlight>
 );
};

Alternative you can add a key to each item in todo and use that instead of the index.