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

fs.writeFile - permission issue on GCP (Google Cloud Run)

error on this: fs . writeFile ( fileName , pdfBytes , err => { if ( err ) { console . log ( err . message ) reject ( err . message ) } else resolve ( fileName ) }) #1 It looks like when deployed into Cloud Run it also requires the extra permission "Service Account Token Creator" to run  getSignedUrl . Locally for some reason this role is not required. #2 Only the directory  /tmp  is writable in Cloud Run. So, change the default write location to write into this directory. However, you have to be aware of 2 things: Cloud Run is stateless, that means when a new instance is created, the container start from scratch, with an empty  /tmp  directory /tmp  directory is an in-memory file system. The maximum allowed memory on Cloud Run is 2Gb, your app memory footprint included. In addition of your file and Airflow, not sure that you will have a lot of space. A final remark. Cloud Run is active only when it...
Post a Comment
Read more

setup git account on mac with ssh - push to remote denied with other login

http://burnedpixel.com/blog/setting-up-git-and-github-on-your-mac/#generatenewkey “ SSH  uses public-key cryptography to authenticate the remote computer and allow it to authenticate the user, if necessary. There are several ways to use SSH; one is to use automatically generated public-private key pairs to simply encrypt a network connection, and then use password authentication to log on.” An SSH key basically lets your computer uniquely identify itself when it connects to servers. If Github is aware of the key your computer is using, you won’t have to enter your Github username/password every time you connect. Check for pre-existing SSH keys on your computer Let’s see if your computer has one or more keys already installed: 1 2 # Point the terminal to the directory that would contain SSH keys for your user account. $ cd ~/.ssh If you get the response “No such file or directory”, skip to  Generate a new SSH Key . Otherwise, you’ll need to backup...
Post a Comment
Read more