From dfb0510775c6199f89d4394f9fab656c9d3c032e Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Wed, 5 Dec 2018 15:23:43 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20useRefMounted=20ho?=
 =?UTF-8?q?ok?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  1 +
 docs/useRefMounted.md                   | 25 +++++++++++++++++++++++++
 src/__stories__/useRefMounted.story.tsx | 20 ++++++++++++++++++++
 src/index.ts                            |  2 ++
 src/useRefMounted.ts                    | 12 ++++++++++++
 5 files changed, 60 insertions(+)
 create mode 100644 docs/useRefMounted.md
 create mode 100644 src/__stories__/useRefMounted.story.tsx
 create mode 100644 src/useRefMounted.ts

diff --git a/README.md b/README.md
index 00eb4bafed..472f2b70e0 100644
--- a/README.md
+++ b/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.
diff --git a/docs/useRefMounted.md b/docs/useRefMounted.md
new file mode 100644
index 0000000000..01158dae3e
--- /dev/null
+++ b/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);
+  });
+};
+```
diff --git a/src/__stories__/useRefMounted.story.tsx b/src/__stories__/useRefMounted.story.tsx
new file mode 100644
index 0000000000..c83d920bfa
--- /dev/null
+++ b/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/>
+  )
diff --git a/src/index.ts b/src/index.ts
index 5c795f08dd..ae6ecc03ab 100644
--- a/src/index.ts
+++ b/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,
diff --git a/src/useRefMounted.ts b/src/useRefMounted.ts
new file mode 100644
index 0000000000..bfb96c690a
--- /dev/null
+++ b/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;