Skip to content

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;
            link: `profile/${userID}`

    async function takeProfile() {
        const data = await request(`http://localhost:5500/api/auth/get/${profileID}`);
            picture: _.get(data, 'profile.picture', ''),
            name: _.get(data, '', '')

    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();
            pictureLink: link

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

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

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.


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.