feat: 🎸 add useRefMounted hook

README.md

@@ -73,6 +73,7 @@
     <br/>
 - [**Lifecycles**](./docs/Lifecycles.md)
   - [`useLifecycles`](./docs/useLifecycles.md) &mdash; calls `mount` and `unmount` callbacks.
+  - [`useRefMounted`](./docs/useRefMounted.md) &mdash; tracks if component is mounted.
   - [`useLogger`](./docs/useLogger.md) &mdash; logs in console as component goes though life-cycles.
   - [`useMount`](./docs/useMount.md) &mdash; calls `mount` callbacks.
   - [`useUnmount`](./docs/useUnmount.md) &mdash; calls `unmount` callbacks.

docs/useRefMounted.md

@@ -0,0 +1,25 @@
+# `useRefMounted`
+
+Lifecycle hook that tracks if component is mounted. Returns a ref, which has a
+boolean `.current` property.
+
+
+## Usage
+
+```jsx
+import {useRefMounted} from 'react-use';
+
+const Demo = () => {
+  const refMounted = useRefMounted();
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (refMounted.currrent) {
+        // ...
+      } else {
+        // ...
+      }
+    }, 1000);
+  });
+};
+```

src/__stories__/useRefMounted.story.tsx

@@ -0,0 +1,20 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useRefMounted, useRaf} from '..';
+import ShowDocs from '../util/ShowDocs';
+
+const Demo = () => {
+  const refMounted = useRefMounted();
+  useRaf();
+  return (
+    <div>
+      is mounted: {refMounted.current ? '👍' : '👎'}
+    </div>
+  );
+};
+
+storiesOf('useRefMounted', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useRefMounted.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )

src/index.ts

@@ -30,6 +30,7 @@ import useObservable from './useObservable';
 import useOrientation from './useOrientation';
 import useOutsideClick from './useOutsideClick';
 import useRaf from './useRaf';
+import useRefMounted from './useRefMounted';
 import useRenderProp from './useRenderProp';
 import useSessionStorage from './useSessionStorage';
 import useSetState from './useSetState';
@@ -79,6 +80,7 @@ export {
   useOrientation,
   useOutsideClick,
   useRaf,
+  useRefMounted,
   useRenderProp,
   useSessionStorage,
   useSetState,

src/useRefMounted.ts

@@ -0,0 +1,12 @@
+import {useRef, useEffect} from 'react';
+
+const useRefMounted = () => {
+  const refMounted = useRef(false);
+  useEffect(() => {
+    refMounted.current = true;
+    return () => refMounted.current = false;
+  });
+  return refMounted;
+};
+
+export default useRefMounted;