feat: 🎸 add useLifecycles hook

Author: streamich

README.md

@@ -59,6 +59,10 @@
    - [`useTitle`](./docs/useTitle.md) — sets title of the page.
      <br/>
      <br/>
+- [__Lifecycles__](./docs/Lifecycles.md)
+   - [`useLifecycles`](./docs/useLifecycles.md) &mdash; calls `mount` and `unmount` callbacks.
+     <br/>
+     <br/>
 - [__State__](./docs/State.md)
    - [`useToggle`](./docs/useToggle.md) &mdash; tracks state of a boolean.
    - [`useCounter`](./docs/useCounter.md) &mdash; tracks state of a number.

docs/useLifecycles.md

@@ -0,0 +1,23 @@
+# `useLifecycles`
+
+React lifecycle hook that call `mount` and `unmount` callbacks, when
+component is mounted and un-mounted, respectively.
+
+
+## Usage
+
+```jsx
+import {useLifecycles} from 'react-use';
+
+const Demo = () => {
+  useLifecycles(() => console.log('MOUNTED'), () => console.log('UNMOUNTED'));
+  return null;
+};
+```
+
+
+## Reference
+
+```js
+useLifecycles(mount, unmount);
+```

src/__stories__/useLifecycles.story.tsx

@@ -0,0 +1,13 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useLifecycles} from '..';
+
+const Demo = () => {
+  useLifecycles(() => console.log('MOUNTED'), () => console.log('UNMOUNTED'));
+  return null;
+};
+
+storiesOf('useLifecycles', module)
+  .add('Example', () =>
+    <Demo/>
+  )

src/index.ts

@@ -6,6 +6,7 @@ import useFavicon from './useFavicon';
 import useGeolocation from './useGeolocation';
 import useHover from './useHover';
 import useIdle from './useIdle';
+import useLifecycles from './useLifecycles';
 import useList from './useList';
 import useLocalStorage from './useLocalStorage';
 import useLocation from './useLocation';
@@ -33,6 +34,7 @@ export {
   useGeolocation,
   useHover,
   useIdle,
+  useLifecycles,
   useList,
   useLocalStorage,
   useLocation,

src/useIdle.ts

@@ -9,11 +9,14 @@ const useIdle = (ms: number = oneMinute, initialState: boolean = false, events:
   const [state, setState] = useState<boolean>(initialState);
 
   useEffect(() => {
+    let mounted = true;
     let timeout: any;
     let localState: boolean = state;
     const set = (newState: boolean) => {
-      localState = newState;
-      setState(newState);
+      if (mounted) {
+        localState = newState;
+        setState(newState);
+      }
     };
 
     const onEvent = throttle(50, () => {
@@ -36,6 +39,8 @@ const useIdle = (ms: number = oneMinute, initialState: boolean = false, events:
     timeout = setTimeout(() => set(true), ms);
 
     return () => {
+      mounted = false;
+
       for (let i = 0; i < events.length; i++) {
         off(window, events[i], onEvent);
       }

src/useLifecycles.ts

@@ -0,0 +1,12 @@
+import {useEffect} from './react';
+
+const useLifecycles = (mount, unmount) => {
+  useEffect(() => {
+    if (mount) mount();
+    return () => {
+      if (unmount) unmount();
+    };
+  }, []);
+};
+
+export default useLifecycles;