Skip to content

Commit 8730eaa

Browse files
committed
feat: 🎸 add createMemo hook factory
1 parent 25f6ea9 commit 8730eaa

File tree

5 files changed

+64
-0
lines changed

5 files changed

+64
-0
lines changed

README.md

+1
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
<br/>
7575
<br/>
7676
- [**State**](./docs/State.md)
77+
- [`createMemo`](./docs/createMemo.md) &mdash; creates a memoized hook.
7778
- [`useGetSet`](./docs/useGetSet.md) &mdash; returns state getter `get()` instead of raw state.
7879
- [`useGetSetState`](./docs/useGetSetState.md) &mdash; as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
7980
- [`useObservable`](./docs/useObservable.md) &mdash; tracks latest value of an `Observable`.

docs/createMemo.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# `createMemo`
2+
3+
A factory that returns a React hook, which is memoized for each set of arguments passed to it.
4+
5+
6+
## Usage
7+
8+
```jsx
9+
import {createMemo} from 'react-use';
10+
11+
const fibonacci = n => {
12+
if (n === 0) return 1;
13+
if (n === 1) return 2;
14+
return fibonacci(n - 1) + fibonacci(n - 2);
15+
};
16+
17+
const useMemoFibonacci = createMemo(fibonacci);
18+
19+
const Demo = () => {
20+
const result = useMemoFibonacci(10);
21+
22+
return (
23+
<div>
24+
fib(10) = {result}
25+
</div>
26+
);
27+
};
28+
```

src/__stories__/createMemo.story.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react';
2+
import {storiesOf} from '@storybook/react';
3+
import {createMemo} from '..';
4+
import ShowDocs from '../util/ShowDocs';
5+
6+
const fibonacci = n => {
7+
if (n === 0) return 1;
8+
if (n === 1) return 2;
9+
return fibonacci(n - 1) + fibonacci(n - 2);
10+
};
11+
12+
const useMemoFibonacci = createMemo(fibonacci);
13+
14+
const Demo = () => {
15+
const result = useMemoFibonacci(10);
16+
17+
return (
18+
<div>
19+
fib(10) = {result}
20+
</div>
21+
);
22+
};
23+
24+
storiesOf('createMemo', module)
25+
.add('Docs', () => <ShowDocs md={require('../../docs/createMemo.md')} />)
26+
.add('Demo', () =>
27+
<Demo/>
28+
)

src/createMemo.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {useMemo} from './react';
2+
3+
const createMemo = fn => (...args) => useMemo(() => fn(...args), args);
4+
5+
export default createMemo;

src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import createMemo from './createMemo';
12
import useAsync from './useAsync';
23
import useAudio from './useAudio';
34
import useBattery from './useBattery';
@@ -38,6 +39,7 @@ import useUpdate from './useUpdate';
3839
import useWindowSize from './useWindowSize';
3940

4041
export {
42+
createMemo,
4143
useAsync,
4244
useAudio,
4345
useBattery,

0 commit comments

Comments
 (0)