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

Question

I'm trying to use the 'useHistory' (from react-router-dom) push method on a function that is called by onClick method. The redirect work fine although i get an error in the console that states:

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.

My routing is handled in My App.js as follows:

function App() {
  return (
    <Container style={{ display: 'flex', flexDirection: 'column' }}>
      <Router>
        <Row>
          <Col>
            <div className="tabs">
              <Switch>
                <Route path='/' exact component={Home} />
                <Route path='/staff' component={InsertingStaff} />
                <Route path='/students' component={InsertingStudents} />
                <Route path='/groups' component={ManageGroups} />
              </Switch>
            </div>
          </Col>
        </Row>
      </Router>
    </Container>
  );
}

and the component that pushes to the router after onClick event:

function GroupsTree() {
  let history = useHistory();

  function handleClick(group_item) {
    localStorage.setItem('selected_group', JSON.stringify(group_item))
    history.push("/groups");
  }

  const styles = {
    lines: {
      color: '#0064FF',
      height: '40px'
    },
    node: {
      backgroundColor: '#0064FF',
      border: '1px solid #1890ff',
    },
    text: {
      color: '#FFFFFF',
    }
  };
  const StyledTree = withStyles(styles)(Tree);
  return (
    <TransformWrapper doubleClick={{ disabled: true }} options={{ limitToBounds: false, minScale: 0.6 }} defaultScale={1}>
      <TransformComponent>
        <StyledTree data={data} direction={true} onClick={item => {
          handleClick(item);
        }}></StyledTree>
      </TransformComponent>
    </TransformWrapper>
  )

}

any idea on what is causing the error/warning?

You probably have an asynchronous operation in process before and after the route transition. BTW, where is Tree coming from? — Sagiv b.g
Does TransformComponent is doing any animations, is this also a third party? — Sagiv b.g
Well, my guess is that its not cleaning up on unmount or something similar. I would check this issue and maybe you just need to get the latest version of the library. To be sure its react-zoom-pan-pinch "fault" i would try running the app without it and see if i get the same warning. — Sagiv b.g
NP, as for the warning you get, i wrote an article about it. hope it helps — Sagiv b.g
btw, i removed the component and it's not throwing that error anymore but i really need that component's abilities — teamdever

Sagiv b.g Sagiv b.g · Accepted Answer · 2019-12-01T09:45:48

This warning is usually thrown when there is an asynchronous operation with a state update involved. By looking at the code you posted it seems there is no async operation that made directly by you, but maybe by a third party library.

It seems like you are using the react-zoom-pan-pinch library with the TransformComponent which is doing some animations (async operation). By searching through their issues i came a cross some related issues such as #30 and #32, it seems to be resolved so you may need to get the latest version. If you still having issues I think its best to open a new issue in their repository.

As for the warning itself, I wrote an article about it which might help you understand it better.

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

1 Answers