react native mapStateToProps and React.useEffect render issue

Question

I have a project that needs to show a register modal when the user is null, it works some times??

I am asking a state element if user exists, then showing the modal, the problem is that when the user is logged in, when the page is shown, sometimes it shows the register modal,

like it renders and then checks if user === null

Is that my problem?

NOTE: on other tabs, this works fine, like it had more time to load the state?

const mapStateToProps = ({ firebase, navigation }) => ({
  firebase,
})

function Feed ({ feed, firebase }) {

  React.useEffect(
    () => navigation.addListener('focus', () => 
      {    
        console.log("aki:: ",firebase.user)
        if (firebase.user === null) {

          //SHOW MODAL TO INVITE REGISTER
          setVisible(true),
          navigation.dispatch(navigateToBrowse())

        } else {
          setVisible(false)
        }
      }
    ),
    []
  );

Answer 1

It's likely because the firebase.user prop isn't set before this component is rendered. It's impossible to tell without seeing the parent component.

You can block the tree from rendering until firebase.user exists.

Otherwise, you have to differentiate between 1. auth is loading, 2. auth is done loading and user doesn't exist, and 3. auth is done loading and user exists.

I initially thought it was because of how you were handling the navigation side effect, so here's that code anyways:

function Feed({ feed, firebase }) {
  const [visible, setVisible] = useState<boolean>(false);

  React.useEffect(() => {
    const checkForUser = () => {
      setVisible(firebase.user === null);
    }

    // Check for user on all focus events
    navigation.addListener('focus', checkForUser);

    // Also check for user immediately
    checkForUser();
  }, []);

  React.useEffect(() => {
    // Only navigate away when visible gets turned on
    if (visible) navigation.dispatch(navigateToBrowse());
  }, [visible])
}