useEffectOnce

README.md

@@ -83,6 +83,7 @@
     <br/>
     <br/>
 - [**Lifecycles**](./docs/Lifecycles.md)
+  - [`useEffectOnce`](./docs/useEffectOnce.md) &mdash; a modified [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) hook that only runs once.
   - [`useEvent`](./docs/useEvent.md) &mdash; subscribe to events.
   - [`useLifecycles`](./docs/useLifecycles.md) &mdash; calls `mount` and `unmount` callbacks.
   - [`useRefMounted`](./docs/useRefMounted.md) &mdash; tracks if component is mounted.

docs/useEffectOnce.md

@@ -0,0 +1,27 @@
+# `useEffectOnce`
+
+React lifecycle hook that runs an effect only once.
+
+## Usage
+
+```jsx
+import {useEffectOnce} from 'react-use';
+
+const Demo = () => {
+  useEffectOnce(() => {
+    console.log('Running effect once on mount')
+
+    return () => {
+      console.log('Running clean-up of effect on unmount')
+    }
+  });
+
+  return null;
+};
+```
+
+## Reference
+
+```js
+useEffectOnce(effect: EffectCallback);
+```

src/__stories__/useEffectOnce.story.tsx

@@ -0,0 +1,21 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useEffectOnce} from '..';
+import ConsoleStory from './util/ConsoleStory'
+import ShowDocs from '../util/ShowDocs';
+
+const Demo = () => {
+  useEffectOnce(() => {
+    console.log('Running effect once on mount')
+
+    return () => {
+      console.log('Running clean-up of effect on unmount')
+    }
+  });
+
+  return <ConsoleStory />;
+};
+
+storiesOf('Lifecycles|useEffectOnce', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useEffectOnce.md')} />)
+  .add('Demo', () => <Demo/>)

src/__stories__/util/ConsoleStory.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const ConsoleStory = ({message = 'Open the developer console to see logs'}) => (
+  <p>{message}</p>
+);
+
+export default ConsoleStory

src/index.ts

@@ -9,6 +9,7 @@ import useDropArea from './useDropArea';
 import useCounter from './useCounter';
 import useCss from './useCss';
 import useDebounce from './useDebounce';
+import useEffectOnce from './useEffectOnce';
 import useEvent from './useEvent';
 import useFavicon from './useFavicon';
 import useFullscreen from './useFullscreen';
@@ -77,6 +78,7 @@ export {
   useCounter,
   useCss,
   useDebounce,
+  useEffectOnce,
   useEvent,
   useFavicon,
   useFullscreen,

src/useEffectOnce.ts

@@ -0,0 +1,14 @@
+import {useRef, useEffect, EffectCallback} from 'react';
+
+const useEffectOnce = (effect: EffectCallback) => {
+  const didRun = useRef(false);
+
+  useEffect(() => {
+    if (!didRun.current) {
+      didRun.current = true;
+      return effect();
+    }
+  });
+}
+
+export default useEffectOnce;