Skip to content

Commit 94f755a

Browse files
committed
2 parents 8156154 + ea4bc48 commit 94f755a

File tree

1 file changed

+38
-38
lines changed

1 file changed

+38
-38
lines changed

README.md

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@ Could change the way you did `componentWillReceiveProps`, could replace `getDeri
2525
2626
[![NPM](https://nodei.co/npm/react-memoize.png?downloads=true&stars=true)](https://nodei.co/npm/react-memoize/)
2727

28-
- [Memoize](#Memoize) - to create declarative memoized selection.
29-
- [MemoizedFlow](#MemoizedFlow) - to create declarative memoized flow.
30-
- [MemoizeContext](#MemoizeContext) - to create memoized selector from context(or any Consumer).
31-
- [MemoizedRender](#MemoizedRender) - to create a render, memoized by a value provided.
28+
- [Memoize](#memoize) - to create declarative memoized selection.
29+
- [MemoizedFlow](#flow) - to create declarative memoized flow.
30+
- [MemoizeContext](#memoizecontext) - to create memoized selector from context(or any Consumer).
31+
- [MemoizedRender](#memoizedrender) - to create a render, memoized by a value provided.
3232

33-
Memoize, MemoizedFlow, MemoizeContext accepts one or more functions to select or transform
34-
incoming data, and provide result to a function-as-child.
33+
Memoize, MemoizedFlow, MemoizeContext accepts one or more functions to select or transform incoming data, and provide result to a function-as-child.
3534

3635
MemoizedRender is memoizing the function-as-child itself.
36+
3737
### Memoize
3838

3939
```js
@@ -54,37 +54,6 @@ Memoize get `compute` function, add passes all the other props to it, streaming
5454

5555
If `pure` prop is set ReactMemoize wil behave as PureComponent, and not update children when could not.
5656

57-
### MemoizeContext
58-
React memoize also provides component to __select__ and __memoize__ data from React16 context, or any other component
59-
which will pass some values into renderProp.
60-
61-
```js
62-
import {MemoizeContext} from 'react-memoize';
63-
64-
<Context.Provider value={{prop1: 1, prop2: 2, prop3: 3}}>
65-
<MemoizeContext consumer={Context.Consumer} selector={select}>
66-
{values => <Render {...values} />}
67-
</MemoizeContext>
68-
</Context.Provider>
69-
```
70-
`consumer` could be any "context"-compatible Component - React.context, create-react-context, unstated, react-copy-write.
71-
All the additional props will be passed down to consumer.
72-
73-
It is better to explain using example.
74-
```js
75-
<MemoizeContext consumer={Consumer} prop1={1} anotherProp={3} selector={select}> />
76-
77-
// will result
78-
79-
<Consumer prop1={1} anotherProp={3}>
80-
{ contextValues => <ReactMemoize {...contextValues} compute={selector}>...</ReactMemoize>}
81-
</Consumer>
82-
```
83-
84-
This is like Redux without dispatching. State in context, selector aka mapStateToProps, and magic memoization in between.
85-
86-
__See it in action ->__ https://codesandbox.io/s/xjz5y3wzrz 🛠
87-
8857
## Flow
8958
`getDerivedStateFromProps` gives you ability to from a new state from props, while `componentDidUpdate` enables you to react
9059
to the state changes.
@@ -133,6 +102,37 @@ own result over it. Until the last step will be reached, and output will be prov
133102
134103
Each step is memoized, as usual, and will always reuse value from the steps before.
135104
105+
### MemoizeContext
106+
React memoize also provides component to __select__ and __memoize__ data from React16 context, or any other component
107+
which will pass some values into renderProp.
108+
109+
```js
110+
import {MemoizeContext} from 'react-memoize';
111+
112+
<Context.Provider value={{prop1: 1, prop2: 2, prop3: 3}}>
113+
<MemoizeContext consumer={Context.Consumer} selector={select}>
114+
{values => <Render {...values} />}
115+
</MemoizeContext>
116+
</Context.Provider>
117+
```
118+
`consumer` could be any "context"-compatible Component - React.context, create-react-context, unstated, react-copy-write.
119+
All the additional props will be passed down to consumer.
120+
121+
It is better to explain using example.
122+
```js
123+
<MemoizeContext consumer={Consumer} prop1={1} anotherProp={3} selector={select}> />
124+
125+
// will result
126+
127+
<Consumer prop1={1} anotherProp={3}>
128+
{ contextValues => <ReactMemoize {...contextValues} compute={selector}>...</ReactMemoize>}
129+
</Consumer>
130+
```
131+
132+
This is like Redux without dispatching. State in context, selector aka mapStateToProps, and magic memoization in between.
133+
134+
__See it in action ->__ https://codesandbox.io/s/xjz5y3wzrz 🛠
135+
136136
# MemoizedRender
137137
MemoizedRender is mostly usable with Context API
138138
```js
@@ -141,7 +141,7 @@ import {MemoizedRender} from 'react-memoize';
141141
<Context.Provider value={{prop1: 1, prop2: 2, prop3: 3}}>
142142
<MemoizedRender consumer={Context.Consumer}>
143143
{values => <Render {...select(values)} />}
144-
</MemoizeContext>
144+
</MemoizedRender>
145145
</Context.Provider>
146146
```
147147
Or, the better example (from [react-copy-write](https://github.com/aweary/react-copy-write#consuming-state))

0 commit comments

Comments
 (0)