Conditional re-render is re-rendering when setState is called with same value-CodePudding

Every time I call setState on isSignedIn even when the value doesn't change, it seems to be re-rendering and setting the screen back to the initial screen of the stack.

const {isAuthenticated, isVerified} = useAuth();
const [isSignedIn, setIsSignedIn] = useState(false);

useEffect(() => setIsSignedIn(isVerified && isAuthenticated), [isAuthenticated, isVerified]);

<NavigationContainer>
  <Root.Navigator initialRouteName={initialRouteName}>
    {!isSignedIn ? (
      <Root.Screen
        name="Auth"
        component={AuthStack}
        options={globalOptions}
      />
    ) : (
      <>
        <Root.Screen
          name="Tab"
          component={TabStack}
          options={globalOptions}
        />
      </>
    )}
  </Root.Navigator>
</NavigationContainer>

CodePudding user response：

This might help

useEffect(() => {
  if( isVerified && isAuthenticated ){
    setIsSignedIn(true);
  }
 }, [isAuthenticated, isVerified]
);

CodePudding user response：

Figured it out. I had a problem with the way I was setting isVerified that it would be set to true for a moment then false.