Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

isMounted

hook to check if your component is still mounted

Changing the state in an unmounted component will result in an error like this:

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

But in some cases (promises derived from an api call, timeouts or intervals...) it's impossible to know if the component is still mounted or not.

😎 Use this hook and avoid errors

import React, { useState, useEffect } from 'react';
import useIsMounted from 'ismounted';
import myService from './myService';
import Loading from './Loading';
import ResultsView from './ResultsView';

const MySecureComponent = () => {
  const isMounted = useIsMounted();
  const [results, setResults] = useState(null);

  useEffect(() => {
    myService.getResults().then(val => {
      if (isMounted.current) {
        setResults(val);
      }
    });
  }, [myService.getResults]);

  return results ? <ResultsView results={results} /> : <Loading />;
};

export default MySecureComponent;

Installing

npm install ismounted or yarn add ismounted

About

React hook to check if the component is still mounted

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •