Warning: Can't perform a React state update on an unmounted component

[csepulv]

Unfortunately I am getting the same error, in the Chrome console, as described in Issue #112

index.js:1375 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Avatar (created by Context.Consumer)
    in withAvatarConfig 

I have a wrapper component that is pretty simple:

function UserAvatar({ user}) {
  return (
    <Avatar
      email={user.email}
      name={user.name}
    />
  );
}

I am using version 3.6.0. The fix described in Issue #112 doesn't seem to be working in this case.

Any suggestions? (Thanks)

[JorgenEvens]

Hi @csepulv, could you create a small sample that produces the error on something like codesandbox.io?

[csepulv]

I tried to create a simple version to reproduce it, but I was unable to. In my tinkering, the error went away, but I have no idea why.

I will close this. If I run into it again, and I can provide a sample that demonstrates the error, I will reopen/create a new issue.

Sorry about that.

[AndrewIsh]

Sorry to re-open this. I'm also seeing this. I have a messaging app, each message has a user's avatar next to it. The error occurs when the user deletes a message. Annoyingly, I've been unable to replicate it on codesandbox (https://codesandbox.io/s/inspiring-jackson-2nhew?file=/src/App.js)

This is the error I see in the app:

I know not being able to replicate it is no help whatsoever, but I wanted to record the fact that I was seeing it too. I'm confident it's something to do with my app, rather than the package, but if/when I do track it down I'll add it here in case others fall into the same problem.

[JorgenEvens]

Hi @AndrewIsh,

What version of React and react-avatar are you currently on?
I'll try looking into this once again.

[AndrewIsh]

Hi @JorgenEvens :

"react": "^16.13.1",
"react-avatar": "^3.9.6",

Thanks for looking into it. As I say, I'm pretty confident it's something to do with my implementation, but I'm bemused as to what it could be. In case it's any help, I have a <UserIcon> component, that wraps <Avatar> component. The reason being I need to look up the user's name. Here's the contents of the <UserIcon> component, I don't think there's anything relevant in there, but I'll include it for completeness:

import React, { useEffect, useState } from 'react';

import { useSelector } from 'react-redux';

import PropTypes from 'prop-types';

import Avatar, { ConfigProvider } from 'react-avatar';

import styles from './UserIcon.module.scss';

const UserIcon = ({ userId }) => {
    const [name, setName] = useState('');

    const stateUsers = useSelector((state) => state.users);

    useEffect(() => {
        const user = stateUsers.usersList.find((user) => user.id === userId);
        if (user) {
            setName(user.name);
        }
    }, [userId, stateUsers.usersList]);

    return (
        <figure className={styles.userIcon}>
            <ConfigProvider
                colors={[
                    '#e2875d',
                    '#586e84',
                    '#50c650',
                    '#c65050',
                    '#50c6a6',
                    '#b450c6',
                    '#c68250'
                ]}
            >
                <Avatar round={true} size="40" name={name}></Avatar>
            </ConfigProvider>
        </figure>
    );
};

UserIcon.propTypes = {
    userId: PropTypes.number
};

export default UserIcon;

[jrock17]

I'm seeing this same warning message. But it only shows if I'm logged in, then log out, then login again.

Maybe something in react-avatar isn't unmounting gracefully?

[turi4200]

same problem here

[turi4200]

csepulv opened this issue on Jun 9, 2019

is it serious that it is still opened?

[JorgenEvens]

@turi4200 May I point out that this issue was closed until Jun 22nd. And that since then no one has provided a working sample actually exhibiting the issue described, as I originally requested.

I'm happy to look at this, but my free time also has its limits. If I need to also create the reproduction it will take longer...

If you know what the actual issue is, I'm happy to review your PR.

[turi4200]

@JorgenEvens
I'm going to encapsulate the error on a sample project then we can have a better clue to analyze.

thanks for attention

[JorgenEvens]

@turi4200 Thank you, that would greatly help things move forward!

[waahabdev]

Hi @JorgenEvens @turi4200, any update?

[JorgenEvens]

@waahabdev I've not been able to reproduce the issue until this day. Neither has anyone provided a project that actually exhibits the above error.

Feel free to leave me a link to a codesandbox and I'll be happy to look into it.