Question 34969 in React native Question posted in
The official React Native documentation can be found here.

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

I want to load the list of all users from an endpoint on the first load of the app.
But, I am getting the Too many re-renders. React limits the number of renders to prevent an infinite loop. error while running this code.

It was working expected with a json object but I replace json with endpoint then I start getting this.
My code is:-

export default function App() {
  const [profiles, setProfiles] = useState()
  const [loader, setLoader] = useState()
  setLoader(false)
  const getProfiles = async () => {
    console.log('start')
    const res = await fetch("https://reqres.in/api/users?page=1")
    const result = await res.json()
    if(result != 'undefined') {
      setProfiles(result.data)
      setLoader(true)
    }
  }

  useEffect(() => {
    getProfiles();
  }, []);

  return (
    <View style={styles.container}>
    
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1
        }}
        keyboardShouldPersistTaps='handled'
      >

      <View style={styles.tasksWrapper}>
        <Text style={styles.sectionTitle}>Users List</Text>
        <View style={styles.items}>
            { 
            loader &&         
              profiles.map((profile, index) => {
                setLoader(false)
                return (
                  <TouchableOpacity key={index}  onPress={() => completeTask(index)}>
                    <UserList profile={profile} /> 
                  </TouchableOpacity>
                )
              })
            }
          
        </View>
      </View>
      </ScrollView>
    </View>
  );
}
Tags:

2

Answers


  1. 0

    You made a mistake

    setLoader(false)

    remove this and use like

    const [loader, setLoader] = useState(false)

    And your function should be

    const getProfiles = async () => {
    setLoader(true)
    console.log('start')
    const res = await fetch("https://reqres.in/api/users?page=1")
    const result = await res.json()
    if(result != 'undefined') {
      setProfiles(result.data)
    }
    setLoader(false)
  }
    Login or Signup to reply.
  2. 0

    Hey you should never call setSTate inside render methods:

    import * as React from 'react';
import { Text, View, StyleSheet ,ScrollView,TouchableOpacity} from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const [profiles, setProfiles] = React.useState([])
  const [loader, setLoader] = React.useState(true)

  const getProfiles = React.useCallback(async () => {

    const res = await fetch("https://reqres.in/api/users?page=1")
    const result = await res.json()
    if(result != 'undefined') {
      setProfiles(result.data)
      setLoader(false)
    }
  },[])

  React.useEffect(() => {
    getProfiles();
  }, [getProfiles]);

  return (
    <View style={styles.container}>
    
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1
        }}
        keyboardShouldPersistTaps='handled'
      >

      <View style={styles.tasksWrapper}>
      {loader && <Text>Loading</Text>}
        <Text style={styles.sectionTitle}>Users List</Text>
        <View style={styles.items}>
            {  
              !loader && profiles.map((profile, index) => {
                return (
                  <TouchableOpacity key={index}  onPress={() => completeTask(index)}>
                   <Text>{index}</Text>
                  </TouchableOpacity>
                )
              })
            }
          
        </View>
      </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container:{flex:1,justifyContent:'center',alignItems:'center',paddingTop:100}
})

    Try this code :

    ive removed all set state methods from render. here is a working example Expo link

    Hope it helps. feel free for doubts

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search