尝试连接组件时 React 冻结

出于某种原因，当尝试连接这个组件时，react 只是挂起而没有给出任何错误：

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(); // Для получения данных
    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;

该问题似乎与profile. 以前，所有内容都打包在变量中并且一切正常，但现在变量已被替换为对象，并且 react 刚刚停止加载。