question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

I am using react-facebook to embed in my website. But I get an error below. Tell me how I can fix it

This’s warning message: 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.

I’m using React v16.4.0

const FanpageFacebook = () => (
  <>
    <BoxTitle title="Fanpage" showViewMoreButtom={false} />
    <div className="bg-white flex p-2.5 mb-2px">
      <FacebookProvider
        appId="469469066915707
"
      >
        <Page
          href="https://www.facebook.com/khotailieumienphi.tk"
          tabs="timeline"
        />
      </FacebookProvider>
    </div>
  </>
);

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:6
  • Comments:13 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
halshingcommented, Dec 22, 2019

I’m still getting this warning after updating to version 8.1.4. It appears #125 is supposed to fix this, but I still get the warning. Any suggestions? It only happens when I navigate to the route directly, rather than being routed to it from the homepage.

Here’s my button:

const FacebookButton = ({ appId, version, scope, onSuccess, children }) => {  
  return (
    <FacebookProvider appId={appId} version={version}>
      <Login
        scope={scope}
        onCompleted={handleResponse}
        onSuccess={() => onSuccess(result)}
        onError={handleError}
      >
        {({ loading, handleClick, error, data }) => (
          <div onClick={handleClick}>
            {children ? children : <DefaultButton loading={loading} />}
          </div>
        )}
      </Login>
    </FacebookProvider>
  );
};

Here it is used on my login page:

class LoginPage extends Component {
  onSuccess = data => {
    this.props.actions.User.login(data);
  };

  render() {
    if (this.props.isLoggedIn) return <Redirect to="/dashboard" />;
    return (
      <div>
        <h1>Login Page</h1>
        <FacebookButton {...btnConfig} onSuccess={this.onSuccess} />
      </div>
    );
  }
}

Here’s a screenshot of the console warning: image

0reactions
seedencommented, Dec 2, 2022

Probably fixed in version 9. Closing it

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't perform a React state update on an unmounted ...
Problem. I am writing an application in React and was unable to avoid a super common pitfall, which is calling setState(...) after ...
Read more >
React: Prevent state updates on unmounted components
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...
Read more >
Fix “Cannot perform a React state update on an unmounted ...
It happens if one performs a state update (call setState) on a component that has been unmounted. React warns us that this causes...
Read more >
React state update on an unmounted component - debuggr.io
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...
Read more >
React prevent state updates on unmounted components
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found