Preventing component render before route validation

[olivier-drieux]

I'm working on a React app that uses an authentication manager component a bit like the one in expo router demo app (AuthManager) to handle user authentication and route validation. The issue I'm facing is that the route component (here "AdminProjectPlanning") is being rendered before the AuthManager component validates the route, causing unnecessary re-renders.

Here's a simplified version of my AuthManager component :

const AuthManager: React.FC = () => {
  const [routeValidated, setRouteValidated] = React.useState(false);
  const rootSegment = useSegments();
  const router = useRouter();
  const instanceIsAuth = useAppStore((state) => state.instanceState.isAuth);
  const instanceUser = useAppStore((state) => state.instanceState.user);

  // useEffect to handle route validation when isAuth is set and the route changes
  React.useEffect(() => {
    if (null !== instanceIsAuth) {
      setRouteValidated(false);

      // Redirect unauthenticated users to the sign-in page
      if (!instanceIsAuth && '(sign-in)' !== rootSegment[0]) {
        router.replace('/sign-in');
      } else if (instanceIsAuth && null !== instanceUser) {
        // Redirect authenticated users to the correct role page
        if (rootSegment[1] !== instanceUser.role) {
          router.replace(`(app)/${instanceUser.role}`);
        }
      }

      setRouteValidated(true);
    }
  }, [instanceIsAuth, instanceUser, rootSegment]);

  return null === instanceIsAuth ? (
    <ThemedActivityIndicator />
  ) : !routeValidated ? null : (
    <Slot />
  );
};

problem is that the AdminProjectPlanning component renders before the AuthManager component's useEffect runs to validate the route, resulting in unecessary API calls triggered and code rendered.

With the routeValidated state, I expect the route component not to render until the route validation is complete. However, the issue persists. How can I ensure that the route component only renders after the AuthManager validates the route?