Calculating state happens to late

Question

I want to make a simple like button, which has the appropriate color, depending if it is liked or not. I try calculate this in advance (before the return) with React.useEffect, but it seems to calculate it afterwards... I can see it because all the hearts, are not colored, but when I do a soft reload, they change to the right color... Anybody knows what I'm doing wrong here?

const Hart = ({subject}) => {
    const [liked, setLiked] = useState(false);
    const [hasloaded,setHasloaded] = useState(false);
    const [ownId, setOwnId] = useState('');
    const [token, setToken] = useState('');
    const [favourite, setFavourite] = useState([]);
    const favouriteId = [];
    React.useEffect(()=> {
        const constructor = async () => {
            await refreshToken();
          
          
              //favourites contains all the favorite subjects
              //This calculates the boolean to check if the subject is liked or not
              //This array is calculated with axios, and is correct
            for(let i = 0; i<favourite.length; i++) {
                if(favourite[i].id === subject.id) setLiked(true)
            }
            setHasloaded(true);
            console.log("done")
        }
        constructor();
    },[])

    if(!hasloaded) return null;
    else{
        return (
            <Pressable style= {styleSubjectList.heartIcon} onPress={() => checkFavorite()}>
                <MaterialCommunityIcons
                    name={liked ? "heart" : "heart-outline"}
                    size={20}
                    color={liked ? "red" : "white"}
                />
            </Pressable>
        );
    }
  };
  export default Hart;

Answer 1

The function constructor is async and you are setting two states which are also async functions. Thus, the for loop which eventually triggers setLiked will not be finished before sethasLoaded is set to true. You need to synchronize both operations.

const constructor = async () => {
   await refreshToken();
         
   for(let i = 0; i<favourite.length; i++) {
       if(favourite[i].id === subject.id) setLiked(true)
   }
}
constructor().then(() => setHasloaded(true)).catch(e => console.log(e))

Answer 2

React.useEffect(()=> {
        const constructor = async () => {
            await refreshToken();

            let token = await getAccessToken();
            setToken(token);
            let id = await getFromStore("ownId");
            id = removeFirstAndLast(id)
            setOwnId(id)

            const axios = require('axios' );
            const config = {
                method: 'get',
                url: backendURL + '/userManagement/users/' + id,
                headers: {
                    'Authorization': 'Bearer ' + JSON.parse(token)
                }
            };

            axios(config)
                .then(function (response) {
                    setFavourite(response.data.favouriteSubjects)
                    // console.log(response.data.favouriteSubjects)
                })
                .catch(function (error) {
                    console.log(error);
                });

            for(let i = 0; i<favourite.length; i++) {
                if(favourite[i].id === subject.id) setLiked(true)
            }
        }
        constructor().then(() => {
            setHasloaded(true);
            console.log("done");
        }).catch(e=>console.log(e));
    },[])