Merge pull request #31 from streamich/createMemo

Create memo

Author: streamich

README.md

@@ -74,6 +74,7 @@
     <br/>
     <br/>
 - [**State**](./docs/State.md)
+  - [`createMemo`](./docs/createMemo.md) &mdash; factory of memoized hooks.
   - [`useGetSet`](./docs/useGetSet.md) &mdash; returns state getter `get()` instead of raw state.
   - [`useGetSetState`](./docs/useGetSetState.md) &mdash; as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
   - [`useObservable`](./docs/useObservable.md) &mdash; tracks latest value of an `Observable`.

docs/createMemo.md

@@ -0,0 +1,36 @@
+# `createMemo`
+
+Hook factory, receives a function to be memoized, returns a memoized React hook,
+which receives the same arguments and returns the same result as the original function.
+
+
+## Usage
+
+```jsx
+import {createMemo} from 'react-use';
+
+const fibonacci = n => {
+  if (n === 0) return 1;
+  if (n === 1) return 2;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+};
+
+const useMemoFibonacci = createMemo(fibonacci);
+
+const Demo = () => {
+  const result = useMemoFibonacci(10);
+
+  return (
+    <div>
+      fib(10) = {result}
+    </div>
+  );
+};
+```
+
+
+## Reference
+
+```js
+const useMemoFn = createMemo(fn);
+```

src/__stories__/createMemo.story.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {createMemo} from '..';
+import ShowDocs from '../util/ShowDocs';
+
+const fibonacci = n => {
+  if (n === 0) return 1;
+  if (n === 1) return 2;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+};
+
+const useMemoFibonacci = createMemo(fibonacci);
+
+const Demo = () => {
+  const result = useMemoFibonacci(10);
+
+  return (
+    <div>
+      fib(10) = {result}
+    </div>
+  );
+};
+
+storiesOf('createMemo', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/createMemo.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )

src/createMemo.ts

@@ -0,0 +1,5 @@
+import {useMemo} from './react';
+
+const createMemo = fn => (...args) => useMemo(() => fn(...args), args);
+
+export default createMemo;

src/index.ts

@@ -1,3 +1,4 @@
+import createMemo from './createMemo';
 import useAsync from './useAsync';
 import useAudio from './useAudio';
 import useBattery from './useBattery';
@@ -38,6 +39,7 @@ import useUpdate from './useUpdate';
 import useWindowSize from './useWindowSize';
 
 export {
+  createMemo,
   useAsync,
   useAudio,
   useBattery,