Can t perform a React state update on an unmounted component

Question

Problem  I am writing an application in React and was unable to avoid a super common pitfall  which is calling setState      after componentWillUnmount        I looked very carefully at my code and tried to put some guarding clauses in place  but the problem persisted and I am still observing the warning   Therefore  I ve got two questions    How do I figure out from the stack trace  which particular component and event handler or lifecycle hook is responsible for the rule violation  Well  how to fix the problem itself  because my code was written with this pitfall in mind and is already trying to prevent it  but some underlying component s still generating the warning    Browser console  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 TextLayerInternal  created by Context Consumer      in TextLayer  created by PageInternal  index js 1446 d console e  index js 1446 warningWithoutStack react-dom development js 520 warnAboutUpdateOnUnmounted react-dom development js 18238 scheduleWork react-dom development js 19684 enqueueSetState react-dom development js 12936   node modules react cjs react development js Component prototype setState react development js 356  callee  TextLayer js 97 tryCatch runtime js 63 invoke runtime js 282 defineIteratorMethods  lt  prototype method  runtime js 116 asyncGeneratorStep asyncToGenerator js 3  throw asyncToGenerator js 29     Code  Book tsx  import   throttle   from  lodash   import   as React from  react   import   AutoWidthPdf   from     shared AutoWidthPdf   import BookCommandPanel from     shared BookCommandPanel   import BookTextPath from     static pdf sde pdf   import    Book css    const DEFAULT WIDTH   140   class Book extends React Component     setDivSizeThrottleable       gt  void    pdfWrapper  HTMLDivElement   null   null    isComponentMounted  boolean   false    state         hidden  true      pdfWidth  DEFAULT WIDTH          constructor props  any        super props       this setDivSizeThrottleable   throttle             gt            if  this isComponentMounted              this setState               pdfWidth  this pdfWrapper  getBoundingClientRect   width - 5                                         500                componentDidMount        gt        this isComponentMounted   true      this setDivSizeThrottleable        window addEventListener  resize   this setDivSizeThrottleable           componentWillUnmount        gt        this isComponentMounted   false      window removeEventListener  resize   this setDivSizeThrottleable           render        gt         lt div className  Book  gt          this state hidden  amp  amp   lt div className  Book  LoadNotification centered  gt Book is being loaded    lt  div gt            lt div className  this getPdfContentContainerClassName    gt           lt BookCommandPanel           bookTextPath  BookTextPath              gt            lt div className  Book  PdfContent  ref  ref   gt  this pdfWrapper   ref  gt             lt AutoWidthPdf             file  BookTextPath              width  this state pdfWidth              onLoadSuccess      any    gt  this onDocumentComplete                  gt           lt  div gt            lt BookCommandPanel           bookTextPath  BookTextPath              gt         lt  div gt       lt  div gt          getPdfContentContainerClassName        gt  this state hidden    hidden           onDocumentComplete        gt        try         this setState   hidden  false           this setDivSizeThrottleable          catch  caughtError          console warn   caughtError                   export default Book    AutoWidthPdf tsx  import   as React from  react   import   Document  Page  pdfjs   from  react-pdf    pdfjs GlobalWorkerOptions workerSrc      cdnjs cloudflare com ajax libs pdf js   pdfjs version  pdf worker js    interface IProps     file  string    width  number    onLoadSuccess   pdf  any    gt  void    export class AutoWidthPdf extends React Component lt IProps gt      render        gt         lt Document       file  this props file        onLoadSuccess      any    gt  this props onLoadSuccess            gt         lt Page         pageNumber  1          width  this props width            gt       lt  Document gt             Update 1  Cancel throttleable function  still no luck   const DEFAULT WIDTH   140   class Book extends React Component     setDivSizeThrottleable         gt  void   amp  Cancelable    undefined    pdfWrapper  HTMLDivElement   null   null    state         hidden  true      pdfWidth  DEFAULT WIDTH          componentDidMount        gt        this setDivSizeThrottleable   throttle             gt            this setState             pdfWidth  this pdfWrapper  getBoundingClientRect   width - 5                             500              this setDivSizeThrottleable        window addEventListener  resize   this setDivSizeThrottleable           componentWillUnmount        gt        window removeEventListener  resize   this setDivSizeThrottleable        this setDivSizeThrottleable  cancel        this setDivSizeThrottleable   undefined          render        gt         lt div className  Book  gt          this state hidden  amp  amp   lt div className  Book  LoadNotification centered  gt Book is being loaded    lt  div gt            lt div className  this getPdfContentContainerClassName    gt           lt BookCommandPanel           BookTextPath  BookTextPath              gt            lt div className  Book  PdfContent  ref  ref   gt  this pdfWrapper   ref  gt             lt AutoWidthPdf             file  BookTextPath              width  this state pdfWidth              onLoadSuccess      any    gt  this onDocumentComplete                  gt           lt  div gt            lt BookCommandPanel           BookTextPath  BookTextPath              gt         lt  div gt       lt  div gt          getPdfContentContainerClassName        gt  this state hidden    hidden           onDocumentComplete        gt        try         this setState   hidden  false           this setDivSizeThrottleable           catch  caughtError          console warn   caughtError                   export default Book

User · Answer

const handleClick   async  item  NavheadersType  index  number    gt        const newNavHeaders       navheaders       if  item url          await router push item url       gt  gt  gt  gt  line causing error  causing route to happen           router push item url      gt  gt  gt  coreect line       newNavHeaders forEach  item    gt   item active   false          newNavHeaders index  active   true        setnavheaders     newNavHeaders

User · Answer

I had this warning possibly because of calling setState from an effect hook  This is discussed in these 3 issues linked together    Anyway  upgrading the react version removed the warning

User · Answer

I had a similar problem and solved it    I was automatically making the user logged-in by dispatching an action on redux    placing authentication token on redux state    and then I was trying to show a message with this setState  succ message         in my component   Component was looking empty with the same error on console    unmounted component    memory leak  etc   After I read Walter s answer up in this thread   I ve noticed that in the Routing table of my application    my component s route wasn t valid if user is logged-in      this props user token  amp  amp           lt div gt               lt Route path   register  type  exact component  MyComp    gt                                                        lt  div gt      I made the Route visible whether the token exists or not

User · Answer

I had a similar issue thanks  ford04 helped me out  However  another error occurred  NB  I am using ReactJS hooks ndex js 1 Warning  Cannot update during an existing state transition  such as within  render    Render methods should be a pure function of props and state    What causes the error   import  useHistory  from  react-router-dom   const History   useHistory   if  true      history push   new-route      return      lt  gt       lt render component   gt     lt   gt     This could not work because despite you are redirecting to new page all state and props are being manipulated on the dom or simply rendering to the previous page did not stop   What solution I found  import  Redirect  from  react-router-dom   if  true      return  lt redirect to  quot  new-route quot    gt    return      lt  gt       lt render component   gt     lt   gt

User · Answer

Functional component approach  Minimal Demo  Full Demo   import React    useState   from  quot react quot   import   useAsyncEffect   from  quot use-async-effect2 quot   import cpFetch from  quot cp-fetch quot     cancellable c-promise fetch wrapper  export default function TestComponent props      const  text  setText    useState  quot  quot       useAsyncEffect      function             setText  quot fetching    quot          const response   yield cpFetch props url         const json   yield response json          setText  Success    JSON stringify json                  props url          return  lt div gt  text  lt  div gt      Class component  Live demo  import   async  listen  cancel  timeout   from  quot c-promise2 quot   import cpFetch from  quot cp-fetch quot    export class TestComponent extends React Component     state         text   quot  quot           timeout 5000     listen    async    componentDidMount         console log  quot mounted quot        const response   yield cpFetch this props url       this setState   text   json    yield response text                render         return  lt div gt  this state text  lt  div gt           cancel     componentWillUnmount         console log  quot unmounted quot

User · Answer

I know that you re not using history  but in my case I was using the useHistory hook from React Router DOM  which unmounts the component before the state is persisted in my React Context Provider   To fix this problem I have used the hook withRouter nesting the component  in my case export default withRouter Login   and inside the component const Login   props   gt         props history push   dashboard         I have also removed the other props history push from the component  e g  if authorization token  return props history push   dashboard   because this causes a loop  because the authorization state   An alternative to push a new item to history

User · Answer

Inspired by  ford04 answer I use this hook  which also takes callbacks for success  errors  finally and an abortFn  export const useAsync             asyncFn           onSuccess   false           onError   false           onFinally   false           abortFn   false         gt         useEffect      gt            let isMounted   true          const run   async      gt                try                  let data   await asyncFn                   if  isMounted  amp  amp  onSuccess  onSuccess data                catch error                    if  isMounted  amp  amp  onError  onSuccess error                finally                   if  isMounted  amp  amp  onFinally  onFinally                                   run           return      gt                if abortFn  abortFn               isMounted   false                    asyncFn  onSuccess      If the asyncFn is doing some kind of fetch from back-end it often makes sense to abort it when the component is unmounted  not always though  sometimes if ie  you re loading some data into a store you might as well just want to finish it even if component is unmounted

User · Answer

Based on  ford04 answer  here is the same encapsulated in a method   import React    FC  useState  useEffect  DependencyList   from  react    export function useEffectAsync  effectAsyncFun     isMounted       gt  boolean     gt  unknown  deps   DependencyList         useEffect       gt            let isMounted   true          const  unused   effectAsyncFun       gt  isMounted            return      gt    isMounted   false            deps        Usage  const MyComponent   FC lt    gt     props    gt        const   asyncProp   setAsyncProp     useState             useEffectAsync  async   isMounted     gt                const someAsyncProp   await               if   isMounted                  setAsyncProp  someAsyncProp                 return  lt div gt

User · Answer

Edit  I just realized the warning is referencing a component called TextLayerInternal  That s likely where your bug is  The rest of this is still relevant  but it might not fix your problem   1  Getting the instance of a component for this warning is tough  It looks like there is some discussion to improve this in React but there currently is no easy way to do it  The reason it hasn t been built yet  I suspect  is likely because components are expected to be written in such a way that setState after unmount isn t possible no matter what the state of the component is  The problem  as far as the React team is concerned  is always in the Component code and not the Component instance  which is why you get the Component Type name   That answer might be unsatisfactory  but I think I can fix your problem   2  Lodashes throttled function has a cancel method  Call cancel in componentWillUnmount and ditch the isComponentMounted  Canceling is more  idiomatically  React than introducing a new property

User · Answer

To remove - Can t perform a React state update on an unmounted component warning  use componentDidMount method under a condition and make false that condition on componentWillUnmount method  For example   -   class Home extends Component      isMounted   false     constructor props        super props        this state           news                    componentDidMount         this  isMounted   true       ajaxVar        get  https   domain          then result   gt            if  this  isMounted              this setState               news  result data hits                                           componentWillUnmount         this  isMounted   false         render

User · Answer

There is a hook that s fairly common called useIsMounted that solves this problem  for functional components     import   useRef  useEffect   from  react    export function useIsMounted       const isMounted   useRef false      useEffect      gt        isMounted current   true      return      gt  isMounted current   false               return isMounted     then in your functional component function Book       const isMounted   useIsMounted             useEffect      gt        asyncOperation   then data   gt          if  isMounted current    setState data

User · Answer

If above solutions dont work  try this and it works for me   componentWillUnmount            fix Warning  Can t perform a React state update on an unmounted component     this setState    state callback   gt           return

User · Answer

If you are fetching data from axios and the error still occurs  just wrap the setter inside the condition let isRendered   useRef false   useEffect      gt        isRendered   true      axios          get  quot  sample api quot            then res   gt                if  isRendered                    setState res data                             return null                      catch err   gt  console log err        return      gt            isRendered   false

User · Answer

try changing setDivSizeThrottleable to  this setDivSizeThrottleable   throttle         gt        if  this isComponentMounted          this setState           pdfWidth  this pdfWrapper  getBoundingClientRect   width - 5                         500      leading  false  trailing  true

User · Answer

Here is a React Hooks specific solution for  Error     Warning  Can t perform a React state update on an unmounted component    Solution  You can declare let isMounted   true inside useEffect  which will be changed in the cleanup callback  as soon as the component is unmounted  Before state updates  you now check this variable conditionally   useEffect      gt      let isMounted   true     note this flag denote mount status   someAsyncOperation   then data   gt        if  isMounted  setState data          return      gt    isMounted   false       use effect cleanup to set flag false  if unmounted        x000D   x000D  const Parent        gt    x000D    const  mounted  setMounted    useState true   x000D    return   x000D       lt div gt  x000D        Parent  x000D         lt button onClick       gt  setMounted  mounted   gt  x000D           mounted    Unmount     Mount   Child x000D         lt  button gt  x000D         mounted  amp  amp   lt Child   gt   x000D         lt p gt  x000D          Unmount Child  while it is still loading  It won t set state later on  x000D          so no error is triggered  x000D         lt  p gt  x000D       lt  div gt  x000D       x000D     x000D   x000D  const Child        gt    x000D    const  state  setState    useState  loading  4 sec        x000D    useEffect      gt    x000D      let isMounted   true     note this mounted flag x000D      fetchData    x000D      return      gt    x000D        isMounted   false  x000D            use effect cleanup to set flag false  if unmounted x000D   x000D         simulate some Web API fetching x000D      function fetchData     x000D        setTimeout      gt    x000D             drop  if  isMounted   to trigger error again x000D          if  isMounted  setState  data fetched    x000D           4000   x000D        x000D            x000D   x000D    return  lt div gt Child   state  lt  div gt   x000D     x000D   x000D  ReactDOM render  lt Parent   gt   document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 13 0 umd react production min js  integrity  sha256-32Gmw5rBDXyMjg 73FgpukoTZdMrxuYW7tj8adbN8z4   crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 13 0 umd react-dom production min js  integrity  sha256-bjQ42ac3EN0GqK40pC9gGi YixvKyZ24qMP 9HiGW7w   crossorigin  anonymous  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   lt script gt var   useReducer  useEffect  useState  useRef     React lt  script gt  x000D   x000D   x000D    Extension  Custom useAsync Hook  We can encapsulate all the boilerplate into a custom Hook  that just knows  how to deal with and automatically abort async functions in case the component unmounts before   function useAsync asyncFn  onSuccess      useEffect      gt        let isMounted   true      asyncFn   then data   gt          if  isMounted  onSuccess data               return      gt    isMounted   false          asyncFn  onSuccess         x000D   x000D     use async operation with automatic abortion on unmount x000D  function useAsync asyncFn  onSuccess    x000D    useEffect      gt    x000D      let isMounted   true  x000D      asyncFn   then data   gt    x000D        if  isMounted  onSuccess data   x000D          x000D      return      gt    x000D        isMounted   false  x000D         x000D        asyncFn  onSuccess    x000D    x000D   x000D  const Child        gt    x000D    const  state  setState    useState  loading  4 sec        x000D    useAsync delay  setState   x000D    return  lt div gt Child   state  lt  div gt   x000D     x000D   x000D  const Parent        gt    x000D    const  mounted  setMounted    useState true   x000D    return   x000D       lt div gt  x000D        Parent  x000D         lt button onClick       gt  setMounted  mounted   gt  x000D           mounted    Unmount     Mount   Child x000D         lt  button gt  x000D         mounted  amp  amp   lt Child   gt   x000D         lt p gt  x000D          Unmount Child  while it is still loading  It won t set state later on  x000D          so no error is triggered  x000D         lt  p gt  x000D       lt  div gt  x000D       x000D     x000D   x000D  const delay        gt  new Promise resolve   gt  setTimeout      gt  resolve  data fetched    4000    x000D   x000D   x000D  ReactDOM render  lt Parent   gt   document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 13 0 umd react production min js  integrity  sha256-32Gmw5rBDXyMjg 73FgpukoTZdMrxuYW7tj8adbN8z4   crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 13 0 umd react-dom production min js  integrity  sha256-bjQ42ac3EN0GqK40pC9gGi YixvKyZ24qMP 9HiGW7w   crossorigin  anonymous  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   lt script gt var   useReducer  useEffect  useState  useRef     React lt  script gt  x000D   x000D   x000D

User · Answer

Depending on how you open your webpage  you may not be causing a mounting  Such as using a  lt Link  gt  back to a page that was already mounted in the virtual DOM  so requiring data from a componentDidMount lifecycle is caught

User · Answer

Inspired by the accepted answer by  ford04 I had even better approach dealing with it  instead of using useEffect inside useAsync create a new function that returns a callback for componentWillUnmount   function asyncRequest asyncRequest  onSuccess  onError  onComplete      let isMounted true   asyncRequest   then  data   gt  isMounted   onSuccess data  null   catch onError  finally onComplete    return      gt   isMounted false          useEffect     gt           return asyncRequest     gt someAsyncTask arg   response  gt                setSomeState response            onError  onComplete

User · Answer

The solution from  ford04 didn t worked to me and specially if you need to use the isMounted in multiple places  multiple useEffect for instance   it s recommended to useRef  as bellow   Essential packages   quot dependencies quot         quot react quot    quot 17 0 1 quot      quot devDependencies quot         quot typescript quot    quot 4 1 5 quot        My Hook Component  export const SubscriptionsView  React FC        gt      const  data  setData    useState lt Subscription   gt       const isMounted   React useRef true      React useEffect      gt        if  isMounted current             fetch data          setData  fetch result         return      gt            isMounted current   false

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

Examples related to javascript

Examples related to reactjs

Examples related to typescript

Examples related to lodash

Examples related to setstate