title: useRef.current is undefined even in useEffect hook
body: <p>I am a beginner to react and react-native. I am trying to set up Firebase for analytics. I am using react-native-redux with react-native-redux-persist. Also using react-naviagation.</p>
  
  <p>The code from App.js in my react native app:</p>
  
  <pre><code>const App = () =&gt; {
    const routeNameRef = React.useRef(null);
    const navigationRef = React.useRef(null);
  
    React.useEffect(() =&gt; {
      console.log('hrhr');
      console.log(routeNameRef);
      console.log(navigationRef);
      const state = navigationRef.current.getRootState();
  
      // Save the initial route name
      routeNameRef.current = getActiveRouteName(state);
    }, []);
  
    return (
      &lt;Provider store={persistStore.store}&gt;
        &lt;PersistGate loading={null} persistor={persistStore.persistor}&gt;
          &lt;NavigationContainer
            ref={navigationRef}
            onStateChange={state =&gt; {
              const previousRouteName = routeNameRef.current;
              const currentRouteName = getActiveRouteName(state);
  
              if (previousRouteName !== currentRouteName) {
                // The line below uses the @react-native-firebase/analytics tracker
                // Change this line to use another Mobile analytics SDK
                analytics().setCurrentScreen(currentRouteName, currentRouteName);
              }
  
              // Save the current route name for later comparision
              routeNameRef.current = currentRouteName;
            }}&gt;
             {/***/}
          &lt;/NavigationContainer&gt;
        &lt;/PersistGate&gt;
      &lt;/Provider&gt;
    );
  };
  </code></pre>
  
  <p>Logs:</p>
  
  <pre><code>LOG  hrhr
  LOG  {"current": undefined}
  LOG  {"current": undefined}
  </code></pre>
  
  <p>Versions:</p>
  
  <pre><code>"react": "16.13.1",
  "react-native": "0.61.5",
  </code></pre>
  
  <p>The app also has dependencies on react native redux and firebase.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>useEffect is sometimes being called on loop after the app reloads, even though I am passing an empty array in useEffect().</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>After removing PersistGate JSX tags, it works fine. Please let me know how can I fix this.</p>