Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. How to prevent for useStates?

Question

I am defining my token check like this in bare react native. I am getting error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

const Stack = createNativeStackNavigator();
function App() {
  
  const [tokenExist, SetTokenExist] = useState(false);
  const if_token = getBurgerToken();
  if (if_token){
  SetTokenExist(true);
  }


  return (
    <NavigationContainer>
      <Stack.Navigator>

        {tokenExist ? (
          <>
            <Stack.Screen name="Home">
              {(props) => <HomeScreen {...props} Istoken={tokenExist} />}
            </Stack.Screen>
          </>
        ) : (
          <>
            <Stack.Screen name="Login">
              {(props) => <LoginScreen {...props} extraData={SetTokenExist} />}
            </Stack.Screen>
          </>
        )
        }



      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

How to tackle the issue over here?

Move the `getBurgerToken` function call, the conditional checking the token and the state setting into a `useEffect` hook. — ivanatias, Dec 05 '22 at 16:02
Does this answer your question? [componentDidMount equivalent on a React function/Hooks component?](https://stackoverflow.com/questions/53945763/componentdidmount-equivalent-on-a-react-function-hooks-component) — CertainPerformance, Dec 05 '22 at 21:45

score 0 · Answer 1 · edited Dec 06 '22 at 14:21

0

You will need to handle the function call within useEffect where you do something like this:

useEffect(() => {
  if(token){
    someFunction()
  }
}, []}

If you set the any state within someFunction and it still causes re-render you should use someFunction with useCallback:

const someFunction = useCallback(() => {
  // someFunction stuff!!!
}, [])

edited Dec 06 '22 at 14:21

BigPun86

2,480
2
25
49

answered Dec 05 '22 at 16:07

alimirzayef

88
6

score 0 · Answer 2 · answered Dec 05 '22 at 19:26

The reason React is called 'React' is because components are designed to 'react' (re-render) to state changes. So, in practice, you are executing the following:

Render Stack
Assuming if_token is true, change state of Stack
Because React re-renders on state changes, repeat steps 1 and 2

This will continue forever as long as if_token's value doesn't change. React is smart, and instead of just freezing in an infinite loop, it throws an error informing you that there is probably an infinite loop.

As mentioned in other posts, useEffect with dependencies is a great way to implement what you are trying to do.

score 0 · Answer 3 · answered Dec 05 '22 at 19:41

0

The below might help

useEffect(() => {
   if (if_token){
      SetTokenExist(true);
   }
 }, []);

answered Dec 05 '22 at 19:41

Sourav Dey

1,051
1
13
21

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. How to prevent for useStates?

3 Answers3