diff --git a/README.md b/README.md
index 2e89bc68..8d2f0faa 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,7 @@
- [`useLogger`](./docs/useLogger.md) — logs in console as component goes through life-cycles.
- [`useMount`](./docs/useMount.md) — calls `mount` callbacks.
- [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks.
+ - [`useUpdateEffect`](./docs/useUpdateEffect.md) — run an `effect` only on updates.
- [**State**](./docs/State.md)
diff --git a/docs/useUpdateEffect.md b/docs/useUpdateEffect.md
new file mode 100644
index 00000000..ca3c7f6d
--- /dev/null
+++ b/docs/useUpdateEffect.md
@@ -0,0 +1,35 @@
+# `useUpdateEffect`
+
+React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the same as the `useEffect` hook.
+
+
+## Usage
+
+```jsx
+import React from 'react'
+import {useUpdateEffect} from 'react-use';
+
+const Demo = () => {
+ const [count, setCount] = React.useState(0);
+
+ React.useEffect(() => {
+ const interval = setInterval(() => {
+ setCount(count => count + 1)
+ }, 1000)
+
+ return () => {
+ clearInterval(interval)
+ }
+ }, [])
+
+ useUpdateEffect(() => {
+ console.log('count', count) // will only show 1 and beyond
+
+ return () => { // *OPTIONAL*
+ // do something on unmount
+ }
+ }) // you can include deps array if necessary
+
+ return
Count: {count}
+};
+```
diff --git a/src/__stories__/useUpdateEffect.story.tsx b/src/__stories__/useUpdateEffect.story.tsx
new file mode 100644
index 00000000..28650a59
--- /dev/null
+++ b/src/__stories__/useUpdateEffect.story.tsx
@@ -0,0 +1,25 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useUpdateEffect} from '..';
+
+const Demo = () => {
+ const [count, setCount] = React.useState(0)
+ const [didUpdate, setDidUpdate] = React.useState(false)
+
+ useUpdateEffect(() => {
+ setDidUpdate(true)
+ }, [count])
+
+ return (
+
+
+
Updated: {didUpdate}
+
+ );
+};
+
+storiesOf('useUpdateEffect', module)
+ .add('Docs', () => )
+ .add('Demo', () =>
+
+ )
diff --git a/src/index.ts b/src/index.ts
index 66bdf580..6fb4a79f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -49,6 +49,7 @@ import useUpdate from './useUpdate';
import useVideo from './useVideo';
import useWindowSize from './useWindowSize';
import useWait from './useWait';
+import useUpdateEffect from './useUpdateEffect'
export {
createMemo,
@@ -101,5 +102,6 @@ export {
useUpdate,
useVideo,
useWindowSize,
- useWait
+ useWait,
+ useUpdateEffect
};
diff --git a/src/useUpdateEffect.ts b/src/useUpdateEffect.ts
new file mode 100644
index 00000000..e696b034
--- /dev/null
+++ b/src/useUpdateEffect.ts
@@ -0,0 +1,16 @@
+import { useRef, useEffect } from 'react'
+
+const useUpdateEffect: typeof useEffect = (effect, deps) => {
+ const isInitialMount = useRef(true)
+
+ useEffect(
+ isInitialMount.current
+ ? () => {
+ isInitialMount.current = false
+ }
+ : effect,
+ deps
+ )
+}
+
+export default useUpdateEffect