Question 33013 in React native Question posted in
The official React Native documentation can be found here.

React Native and FIrebase: Making an async call seems to run through twice

as I continue to work on my issues I’ve got one that’s kind of perplexing. my app has two JS files that interact with each other, but what’s odd is it seems that then I call the function to get the data from firestore it seems that it wants to run it twice.

Here is the HomeScreen.js file that is suppoed to call UserInformation

import { Pressable, Text } from 'react-native';

import { useEffect, useId, useState } from 'react';
import { async } from '@firebase/util';
import { FlatList } from 'react-native-gesture-handler';
import {getStorage, ref, getDownloadURL} from 'firebase/storage';
//import the user infomration component
import UserInformation from '../components/UserInformation';
import ClubInformation from '../components/ClubInformation';
import AircraftInformation from '../components/AircraftInformation';



function HomeScreen() {


const userDetails = UserInformation();
const clubDetails = ClubInformation();
const aircraftDetails = AircraftInformation();
if (userDetails !== null) {
    //console.log(userDetails)
    //console.log(clubDetails)
    //console.log(aircraftDetails)
}



if(!userDetails) {  
    return <Text>Loading...</Text>
}

if(!clubDetails) {
    return <Text>Loading...</Text>
}
    
    return <Text>Welcome {userDetails.first} {userDetails.last} {clubDetails.name}!  This is a placeholder for future updates in the home screen</Text>




}

export default HomeScreen

the userDetails calls is below:
userInformation.js

import { useState, useEffect } from "react";
import { getAuth } from "firebase/auth";
import { doc, getDoc } from "firebase/firestore";
import { db } from '../components/FirebaseConfig';

export default function UserInformation() {
    const [userDetails, setUserDetails] = useState(null);
    
    useEffect(() => {
        async function getUserDetails() {
        const user = getAuth().currentUser;
        const userRef = doc(db, "users", user.uid);
        const docSnap = await getDoc(userRef);
        if (docSnap.exists()) {
            const data = docSnap.data();
            setUserDetails(data);
        } else {
            console.log("No such User!");
        }
        }
        getUserDetails();
    }, []);
    
    return userDetails;
    }

Whenever I do a console log from the HomeScreen it seems to first return null, then it returns the data. Is there something I’m doing wrong here (I’m sure it is) or is it standard behavior? Thank you in advance

I tried to run this multiple ways but those other functions that i have that also query the db seem to do the same thing. I don’t know if it’s something up with my async

Tags:

2

Answers


  1. 0

    This is expected behavior when UserInformation function is working as a custom hook.

    The first time when HomeScreen component was initialized/mounted, the default value userDetails is null.

    After a few seconds, the app fetches data from Firestore and updates userDetails state value which trigger a second rerender.

    Note: Recommended best practice is always prefixed custom hooks function name use[FUNCTION_NAME] like useUserInformation.

    Login or Signup to reply.
  2. 0

    Your logic is completely wrong. You couldn’t wait on referencing hook function.
    Even you can use useEffect hook if you want to get valid response.

    function HomeScreen() {


const userDetails = UserInformation();
const clubDetails = ClubInformation();
const aircraftDetails = AircraftInformation();
useEffect(()=>{
  if (userDetails) {
    console.log(userDetails)
  }
}, [userDetails])

if(!userDetails) {  
    return <Text>Loading...</Text>
}

if(!clubDetails) {
    return <Text>Loading...</Text>
}
    
    return <Text>Welcome {userDetails.first} {userDetails.last} {clubDetails.name}!  This is a placeholder for future updates in the home screen</Text>




}

    As I said in my comment you don’t need to create your custom hook functions. It’s enough with normal functions it will work like this.

    async function getUserDetails() {
    const user = getAuth().currentUser;
    const userRef = doc(db, "users", user.uid);
    const docSnap = await getDoc(userRef);
    if (docSnap.exists()) {
        const data = docSnap.data();
        return data;
    } else {
        console.log("No such User!");
        return null
    }
}

function HomeScreen() {
    const [userDetails, setUserDetails] = useState(null)
    useEffect(()=>{
        getUserDetails().then(data=>{
            if (data != null) {
                setUserDetails(data)
            }
        })
    }, [])
    if (!userDetails) {  
        return <Text>Loading...</Text>
    }
    return <Text>Welcome {userDetails.first} {userDetails.last}</Text>
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search