React hangs when trying to connect to component

For some reason, when trying to connect this component, react simply hangs without giving any error:

import React, { useState, useEffect } from 'react';
import { useHttp } from '../../hooks/http.hooks';

import _ from 'lodash';

import profileImg from '../../img/system/profile/profileImg.svg';

function ProfileLink() {
    const { request } = useHttp(); // To get data
    const [profile, setProfile] = useState({});

    const profileID = JSON.parse(localStorage.getItem('user')).id;

    function takeProfileLink() {
        const userID = JSON.parse(localStorage.getItem('user')).id;
        setProfile({
            ...profile,
            link: `profile/${userID}`
        });
    }

    async function takeProfile() {
        const data = await request(`http://localhost:5500/api/auth/get/${profileID}`);
        setProfile({
            ...profile,
            picture: _.get(data, 'profile.picture', 'https://i.pinimg.com/originals/0c/3b/3a/0c3b3adb1a7530892e55ef36d3be6cb8.png'),
            name: _.get(data, 'profile.name', '')
        });
    }

    async function takeProfilePicture() {
        if (profile.picture) {
            return `http://localhost:5500/api/upload/image_get/${profile.picture}`;
        } else {
            return profileImg;
        }
    }

    async function standProfilePicture() {
        const link = await takeProfilePicture();
        setProfile({
            ...profile,
            pictureLink: link
        });
    }

    useEffect(async() => {
        await takeProfile();
        takeProfileLink();
    }, []);
    
    standProfilePicture();

    return (
        <a href={profile.link} className="profile-link">
            <div className="profile-name">
                {profile.name}
            </div>
            <div className="profile-picture">
                <img src={profile.pictureLink} alt="profile picture"/>
            </div>
        </a>
    );
}

export default ProfileLink;

Presumably the problem is with the profile object. Previously, everything was packaged in variables and everything worked, but now I replaced the variables with an object and react just stopped loading.

Answer

Try moving the call to standProfilePicture() inside the useEffect hook. A dangling function call may be causing the component re-render indefinitely, thus freezing the page.

Advertisement

Answer