feat: add UseEffectOnUpdate story

README.md

@@ -263,7 +263,7 @@ Only runs the callback when inputs change and not during mounting.
 ```ts
 interface Props {
   fn: () => void | VoidFn;
-  inputs?: any[];
+  inputs: any[]; // unlike UseEffect, this is required.
   comparator?: EqualityFn;
 }
 ```

src/UseEffectOnUpdate.tsx

@@ -4,7 +4,7 @@ import { EqualityFn, VoidFn } from './utils';
 
 interface Props {
   fn: () => void | VoidFn;
-  inputs?: any[]; // eslint-disable-line @typescript-eslint/no-explicit-any
+  inputs: any[]; // eslint-disable-line @typescript-eslint/no-explicit-any
   comparator?: EqualityFn;
 }
 

stories/UseCallback.story.tsx

@@ -28,7 +28,7 @@ function ConditionalExample(props) {
   return (
     <div>
       <p>Update: {count}</p>
-      <p>Function called: {called}</p>
+      <p>Function Called: {called}</p>
 
       <button onClick={(): void => setCount(count + 1)}>Update</button>
 
@@ -48,7 +48,7 @@ function OnceOnceExample(props) {
   return (
     <div>
       <p>Update: {count}</p>
-      <p>Function called: {called}</p>
+      <p>Function Called: {called}</p>
 
       <button onClick={(): void => setCount(count + 1)}>Update</button>
 

stories/UseEffect.story.tsx

@@ -4,10 +4,36 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import withState from './withState';
 import UseEffect from '../src/UseEffect';
+import withDemoHelper from './withDemoHelper';
 
 const { Fragment } = React;
 
 function Example(props) {
+  const { count, setCount, called, setCalled } = props;
+
+  return (
+    <div>
+      <p>Update: {count}</p>
+      <p>Function Called: {called}</p>
+      <button onClick={() => setCount(count + 1)}>Update</button>
+
+      <p>
+        {`(Use "<UseEffectOnUpdate>" instead if you want "Function Called" to start from 0)`}
+      </p>
+
+      <UseEffect
+        fn={() => {
+          setCalled(called + 1);
+        }}
+        inputs={[count]}
+      />
+    </div>
+  );
+}
+
+const Demo = withDemoHelper(Example);
+
+function WithoutCleanup(props) {
   const { count, setCount } = props;
 
   return (
@@ -24,7 +50,9 @@ function Example(props) {
   );
 }
 
-const EffectsWithoutCleanupDemo = withState('count', 'setCount', 0)(Example);
+const EffectsWithoutCleanupDemo = withState('count', 'setCount', 0)(
+  WithoutCleanup
+);
 
 const ChatAPI = {
   subscribeToFriendStatus: (id: number, handleStatusChange: Function) => {
@@ -86,5 +114,6 @@ const EffectsWithCleanupDemo = withState('friendID', 'setFriendID', 1)(
 );
 
 storiesOf('1. Core|UseEffect', module)
+  .add('Demo', () => <Demo />)
   .add('Effects Without Cleanup', () => <EffectsWithoutCleanupDemo />)
   .add('Effects With Cleanup', () => <EffectsWithCleanupDemo />);

stories/UseEffectOnUpdate.story.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable */
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import withDemoHelper from './withDemoHelper';
+import UseEffectOnUpdate from '../src/UseEffectOnUpdate';
+
+function Example(props) {
+  const { count, setCount, called, setCalled } = props;
+
+  return (
+    <div>
+      <p>Update: {count}</p>
+      <p>Function Called: {called}</p>
+      <button onClick={() => setCount(count + 1)}>Update</button>
+
+      <p>
+        {`(Use "<UseEffect>" instead if you want "Function Called" to start from 1)`}
+      </p>
+
+      <UseEffectOnUpdate
+        fn={() => {
+          setCalled(called + 1);
+        }}
+        inputs={[count]}
+      />
+    </div>
+  );
+}
+
+const Demo = withDemoHelper(Example);
+
+storiesOf('2. Additional|UseEffectOnUpdate', module).add('Demo', () => (
+  <Demo />
+));

stories/UseGeolocation.story.tsx

@@ -48,7 +48,7 @@ storiesOf('2. Additional|UseGeolocation', module)
     <Fragment>
       <Demo watch />
       <p>
-        <strong>Note:</strong> You'll need to use your browser devtools sensors
+        <strong>Note:</strong> You might need to use your browser devtools sensors
         to simulate location changes.
       </p>
     </Fragment>

stories/UseInterval.story.tsx

@@ -25,4 +25,4 @@ function Example(props) {
 
 const Demo = withState('count', 'setCount', 0)(Example);
 
-storiesOf('2. Additional|UseInterval', module).add('Timer', () => <Demo />);
+storiesOf('2. Additional|UseInterval', module).add('Demo', () => <Demo />);

stories/UseTimeout.story.tsx

@@ -25,4 +25,4 @@ function Example(props) {
 
 const Demo = withState('state', 'setState', 'no')(Example);
 
-storiesOf('2. Additional|UseTimeout', module).add('Timer', () => <Demo />);
+storiesOf('2. Additional|UseTimeout', module).add('Demo', () => <Demo />);