diff --git a/README.md b/README.md index f76e555..41ba06d 100644 --- a/README.md +++ b/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; } ``` diff --git a/src/UseEffectOnUpdate.tsx b/src/UseEffectOnUpdate.tsx index 1786344..ce5366f 100644 --- a/src/UseEffectOnUpdate.tsx +++ b/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; } diff --git a/stories/UseCallback.story.tsx b/stories/UseCallback.story.tsx index 1b0d2af..82d172b 100644 --- a/stories/UseCallback.story.tsx +++ b/stories/UseCallback.story.tsx @@ -28,7 +28,7 @@ function ConditionalExample(props) { return (

Update: {count}

-

Function called: {called}

+

Function Called: {called}

@@ -48,7 +48,7 @@ function OnceOnceExample(props) { return (

Update: {count}

-

Function called: {called}

+

Function Called: {called}

diff --git a/stories/UseEffect.story.tsx b/stories/UseEffect.story.tsx index a6e4e39..ed117ba 100644 --- a/stories/UseEffect.story.tsx +++ b/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 ( +
+

Update: {count}

+

Function Called: {called}

+ + +

+ {`(Use "" instead if you want "Function Called" to start from 0)`} +

+ + { + setCalled(called + 1); + }} + inputs={[count]} + /> +
+ ); +} + +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', () => ) .add('Effects Without Cleanup', () => ) .add('Effects With Cleanup', () => ); diff --git a/stories/UseEffectOnUpdate.story.tsx b/stories/UseEffectOnUpdate.story.tsx new file mode 100644 index 0000000..4e9ebe4 --- /dev/null +++ b/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 ( +
+

Update: {count}

+

Function Called: {called}

+ + +

+ {`(Use "" instead if you want "Function Called" to start from 1)`} +

+ + { + setCalled(called + 1); + }} + inputs={[count]} + /> +
+ ); +} + +const Demo = withDemoHelper(Example); + +storiesOf('2. Additional|UseEffectOnUpdate', module).add('Demo', () => ( + +)); diff --git a/stories/UseGeolocation.story.tsx b/stories/UseGeolocation.story.tsx index 501e575..16ab4b9 100644 --- a/stories/UseGeolocation.story.tsx +++ b/stories/UseGeolocation.story.tsx @@ -48,7 +48,7 @@ storiesOf('2. Additional|UseGeolocation', module)

- Note: You'll need to use your browser devtools sensors + Note: You might need to use your browser devtools sensors to simulate location changes.

diff --git a/stories/UseInterval.story.tsx b/stories/UseInterval.story.tsx index 26bffef..e038615 100644 --- a/stories/UseInterval.story.tsx +++ b/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', () => ); +storiesOf('2. Additional|UseInterval', module).add('Demo', () => ); diff --git a/stories/UseTimeout.story.tsx b/stories/UseTimeout.story.tsx index 0ba4e29..0601da5 100644 --- a/stories/UseTimeout.story.tsx +++ b/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', () => ); +storiesOf('2. Additional|UseTimeout', module).add('Demo', () => );