Skip to main content

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 - useIsMountedRef

 


https://juliangaramendy.dev/blog/use-promise-subscription

React.useEffect(() => {
    let isSubscribed = true;
    fetchBananas()
      .then(bananas => (isSubscribed ? setBananas(bananas) : null))
      .catch(error => (isSubscribed ? setError(error.toString()) : null));

    return () => (isSubscribed = false);
  }, []);

https://juliangaramendy.dev/blog/managing-remote-data-with-swr

https://betterprogramming.pub/why-you-should-be-separating-your-server-cache-from-your-ui-state-1585a9ae8336


https://www.youtube.com/watch?v=oWVW8IqpQ-A

How severe is this warning?

Since this is a warning, it is not a showstopper. But bear in mind that your asynchronous code could potentially cause performance issues or memory leaks.

How can I prevent the issue?

The issue represents a state management design issue in your application. There are many ways to solve state management design issues. Here are a few:

  • Develop an “isMounted” workaround to the problem (not recommended)
  • Move your state management code up in your component tree
  • Use a pub / sub design for state management instead of 

Develop an “isMounted” workaround to the problem (not recommended)

The React documentation very clearly states that the isMounted workaround is an anti-pattern. There are some documented workarounds such as “making promises cancelable”. But bear in mind that even the suggested workarounds are often hacks that don’t address your application’s design.

Use a pub / sub design for state management instead of setState

Pub / sub state management designs like Redux decouple state management from your component. So instead of your components calling setState, they simply call , and they also subscribe to your store.

Therefore state is no longer the responsibility of your component, it is the responsibility of something else. In the case of Redux, it becomes a responsibility that is global to your application.

Keep in mind that the Redux useReducer hook also calls setState, so it will not resolve this issue.



Comments

Post a Comment

Popular posts from this blog

for loop in javascript - promise - .eslintrc for "for of"

the vast majority of cases  map ,  forEach ,  find  etc. can be used.  async function printFiles () { const files = await getFilePaths(); await Promise.all(files. map (async (file) => { const contents = await fs.readFile(file, 'utf8') console.log(contents) })); } const inventory = [ { name : 'apples' , quantity : 2 } , { name : 'bananas' , quantity : 0 } , { name : 'cherries' , quantity : 5 } ] ; const result = inventory . find ( ( { name } ) => name === 'cherries' ) ;   function getFirstMatching(array) { for (let item of array) { const result = heavyTransform(item); if (result) { return result; } } } Specifically this shuts down the whole no-restricted-syntax. If you want to cherry-pick, here is the current definition: 'no-restricted-syntax' : [ 'error' , { selector : 'ForInStatement' , message...
Post a Comment
Read more

Apollo client - cache APIs - auto update cache - erase cache - reactive variables - deletion - addition

Apollo Client 3  Local only fields Reactive Variables const cache = new InMemoryCache ( { typePolicies : { Todo : { // If one of the keyFields is an object with fields of its own, you can // include those nested keyFields by using a nested array of strings: keyFields : [ "date" , "user" , [ "email" ] ] , } } , } ) ; This internal data is intended to be easily  JSON-serializable , so you can take a snapshot with  cache.extract() , save it somewhere, and later restore with  cache.restore(snapshot) . Here’s a mutation called  EditTodo  that returns the new  todo  value in the mutation response. mutation EditTodo ( $id : Int ! , $text : String ! ) { editTodo ( id : $id , text : $text ) { success todo { # <- Returning it here id text completed } error { ... on TodoNotFoundError { message } ... on TodoValidationE...
Post a Comment
Read more

window.URL.createObjectURL is not (yet) available in jest-dom - testing scenario

Since  window.URL.createObjectURL  is not (yet) available in jest-dom, you need to provide a mock implementation for it. Don't forget to reset the mock implementation after each test. describe ( "your test suite" , () => { window . URL . createObjectURL = jest . fn (); afterEach (() => { window . URL . createObjectURL . mockReset (); }); it ( "your test case" , () => { expect ( true ). toBeTruthy (); }); });
Post a Comment
Read more