Custom hook getting undefined value then the correct object in react native?

Question

Hello so am trying to make a custom hook where i get my user object from database and using it however my console log shows the the object is undefined shortly after object appears and this effect other function relying on it they only capture the first state and gives an error how can i fix that here is my code for the hook:-

import { useState, useEffect } from 'react'
import { storage, auth, database } from '../api/auth';



export default function useUser() {
    const [user, setUser] = useState()
    const userId = auth.currentUser.uid;

    useEffect(() => {
        getCurrentUser();

    }, [])


    const getCurrentUser = () => {
        database.ref("users/" + userId).orderByChild('name').once("value").then(snapshot => {
            setUser(snapshot.val())
        })
    }

    return user
}

Sergej Klackovskis · Accepted Answer · 2020-09-13 23:23:22Z

1

First of all you can assign default value to userObject.

const [user, setUser] = useState(null);

After place where you use useUser hook you can make a check is it null or not.

const user = useUser();


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

return(
    <Text>{user.name}</Text>
);

answered Sep 13, 2020 at 23:23

Sergej Klackovskis

4532 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mouktar Aden Over a year ago

i did what you said the initialize to null and called the hook in my other components however it gives user = null and then the user=object?

Sergej Klackovskis Over a year ago

Yes. First you need to fetch the user. Until that moment while user=null you can show the spinner, loading message or return null. When you get the user(user=object), you just render.

Mouktar Aden Over a year ago

what about other function that need to compute the user for example i have a function needs user._id how do i make them wait for user to get updated and not give me an error user is null?

Sergej Klackovskis Over a year ago

you just wrap them inside useEffect and provide user as a dependency. Inside useEffect before running your function you can check is user null or not.

Collectives™ on Stack Overflow

Custom hook getting undefined value then the correct object in react native?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related