feat: added UseEffectOnUpdate

README.md

@@ -26,11 +26,12 @@
     - [UseEffect](#useeffect)
     - [UseCallback](#usecallback)
   - [Additional Components](#additional-components)
+    - [UseEffectOnUpdate](#useeffectonupdate)
+    - [UseEffectOnce](#useeffectonce)
     - [UseInterval](#useinterval)
     - [UseTimeout](#usetimeout)
     - [UseGeolocation](#usegeolocation)
     - [UseMouseOut](#usemouseout)
-    - [UseEffectOnce](#useeffectonce)
 - [License](#license)
 
 <!-- /TOC -->
@@ -255,6 +256,28 @@ interface Props {
 
 Most of the following components are implementations of the 2 core components.
 
+#### UseEffectOnUpdate
+
+Only runs the callback when inputs change and not during mounting.
+
+```ts
+interface Props {
+  fn: () => void | VoidFn;
+  inputs?: any[];
+  comparator?: EqualityFn;
+}
+```
+
+#### UseEffectOnce
+
+Alias method using `UseEffect` with `prop.inputs` preset to `[]`
+
+```ts
+interface Props {
+  fn: () => void;
+}
+```
+
 #### UseInterval
 
 Calls the function at every specified interval (in milliseconds),
@@ -305,16 +328,6 @@ interface Props {
 }
 ```
 
-#### UseEffectOnce
-
-Alias method using `UseEffect` with `prop.inputs` preset to `[]`
-
-```ts
-interface Props {
-  fn: () => void;
-}
-```
-
 ## License
 
 `react-unhook` is [MIT licensed](./LICENSE)
@@ -328,6 +341,5 @@ interface Props {
 [codecov-badge]: https://img.shields.io/codecov/c/github/yeojz/react-unhook/master.svg?style=flat-square
 [codecov-link]: https://codecov.io/gh/yeojz/react-unhook
 [project-docs-link]: https://yeojz.github.io/react-unhook
-
 [with-state-local]: https://github.com/yeojz/react-unhook/blob/master/stories/withState.tsx
 [with-state-recompose]: https://github.com/acdlite/recompose/blob/master/docs/API.md#withstate

src/UseEffectOnUpdate.test.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { render } from 'react-testing-library';
+import UseEffectOnUpdate from './UseEffectOnUpdate';
+
+test('should call props.fn only when  inputs change', (): void => {
+  const fn = jest.fn();
+  const { rerender } = render(<UseEffectOnUpdate fn={fn} inputs={[1]} />);
+  expect(fn).toHaveBeenCalledTimes(0);
+
+  rerender(<UseEffectOnUpdate fn={fn} inputs={[1]} />);
+  expect(fn).toHaveBeenCalledTimes(0);
+
+  rerender(<UseEffectOnUpdate fn={fn} inputs={[2]} />);
+  expect(fn).toHaveBeenCalledTimes(1);
+});

src/UseEffectOnUpdate.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import UseEffect from './UseEffect';
+import { EqualityFn, VoidFn } from './utils';
+
+interface Props {
+  fn: () => void | VoidFn;
+  inputs?: any[]; // eslint-disable-line @typescript-eslint/no-explicit-any
+  comparator?: EqualityFn;
+}
+
+interface State {
+  mounted: boolean;
+}
+
+export default class UseEffectOnUpdate extends React.Component<Props, State> {
+  state = {
+    mounted: false
+  };
+
+  callback = (): void => {
+    if (this.state.mounted) {
+      this.props.fn();
+      return;
+    }
+
+    this.setState({ mounted: true });
+  };
+
+  render(): JSX.Element {
+    return (
+      <UseEffect
+        fn={this.callback}
+        inputs={this.props.inputs}
+        comparator={this.props.comparator}
+      />
+    );
+  }
+}

src/UseEffectOnce.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render } from 'react-testing-library';
 import UseEffectOnce from './UseEffectOnce';
 
-test('should call props.fn once even when rerendering', (): void => {
+test('should call props.fn only once', (): void => {
   const fn = jest.fn();
   const { rerender } = render(<UseEffectOnce fn={fn} />);
 

src/index.ts

@@ -2,6 +2,7 @@ export { default as UseCallback } from './UseCallback';
 export { default as UseEffect } from './UseEffect';
 
 export { default as UseEffectOnce } from './UseEffectOnce';
+export { default as UseEffectOnUpdate } from './UseEffectOnUpdate';
 export { default as UseGeolocation } from './UseGeolocation';
 export { default as UseInterval } from './UseInterval';
 export { default as UseMouseOut } from './UseMouseOut';