add MemoizedRender

Author: theKashey

.npmignore

@@ -5,6 +5,7 @@ circle.yml
 stories/
 _tests/
 src/
+assets/
 
 .DS_Store
 .size-limit

.size-limit

@@ -1,6 +1,6 @@
 [
   {
     path: "dist/index.js",
-    limit: "6.7 KB"
+    limit: "7.5 KB"
   }
 ]

README.md

@@ -1,14 +1,32 @@
-# react-memoize  🤯 🧠 🧙
-[![CircleCI status](https://img.shields.io/circleci/project/github/theKashey/react-memoize/master.svg?style=flat-square)](https://circleci.com/gh/theKashey/react-focus-lock/tree/master)
+<div align="center">
+  <h1>react-memoize  🤯 🧠</h1>
+  <br/>
+  <img src="./assets/logo.png" alt="memoize" height="187" align="center">
+  <br/>
+  [![CircleCI status](https://img.shields.io/circleci/project/github/theKashey/react-memoize/master.svg?style=flat-square)](https://circleci.com/gh/theKashey/react-focus-lock/tree/master)
+</div>  
 
+7kb library to change the world. It is not fast, but it is MUCH faster that VDOM tree comparison you will face in case of render trashing.  
+Uses [memoize-state](https://github.com/theKashey/memoize-state) underneath, providing the same magic for `get` as [immer](https://github.com/mweststrate/immer) provided to `set`. 
 
-Component memoization for React! Based on [Dan Abramov's tweet](https://twitter.com/dan_abramov/status/965378278461755392) :)
+__Just write code as you want. It it will be properly memoized__.
+
+This is declarative component memoization for React! Based on [Dan Abramov's tweet](https://twitter.com/dan_abramov/status/965378278461755392)
 Could change the way you did `componentWillReceiveProps`, could replace `getDerivedStateFromProps`, could make things better.
 
 > IE11+, React 15 and React 16.3 compatible.
 
 [![NPM](https://nodei.co/npm/react-memoize.png?downloads=true&stars=true)](https://nodei.co/npm/react-memoize/)
 
+- [Memoize](#Memoize) - to create declarative memoized selection.
+- [MemoizedFlow](#MemoizedFlow) - to create declarative memoized flow.
+- [MemoizeContext](#MemoizeContext) - to create memoized selector from context(or any Consumer).
+- [MemoizedRender](#MemoizedRender) - to create a render, memoized by a value provided. 
+
+Memoize, MemoizedFlow, MemoizeContext accepts one or more functions to select or transform
+incoming data, and provide result to a function-as-child.
+
+MemoizedRender is memoizing the function-as-child itself.
 ### Memoize
 
 ```js
@@ -17,9 +35,9 @@ Could change the way you did `componentWillReceiveProps`, could replace `getDeri
  <Memoize
    prop1 = "theKey"
    state = {this.state}
-   
-   compute={({prop1, state}) => heavyComputation(state[prop1])}
-   pure
+   // values from above will be provided to compute function
+   compute={({prop1, state}) => heavyComputation(state[prop1])} // Memoize tracks WHAT you are doing 
+   pure // Memoize will be a pure component itself
   >
   { result => <Display>{result}</Display>}
   </Memoize>
@@ -42,7 +60,7 @@ import {MemoizeContext} from 'react-memoize';
     </MemoizeContext>
 </Context.Provider>
 ``` 
-`consumer` could be any "context"-compatible Component - React.context, create-react-context or unstated.
+`consumer` could be any "context"-compatible Component - React.context, create-react-context, unstated, react-copy-write.
 All the additional props will be passed down to consumer. 
 
 It is better to explain using example.
@@ -108,6 +126,42 @@ own result over it. Until the last step will be reached, and output will be prov
 
 Each step is memoized, as usual, and will always reuse value from the steps before. 
 
+# MemoizedRender
+MemoizedRender is mostly usable with Context API
+```js
+import {MemoizedRender} from 'react-memoize';
+
+<Context.Provider value={{prop1: 1, prop2: 2, prop3: 3}}>
+    <MemoizedRender consumer={Context.Consumer}>
+      {values => <Render {...select(values)} />}
+    </MemoizeContext>
+</Context.Provider>
+```
+Or, the better example (from [react-copy-write](https://github.com/aweary/react-copy-write#consuming-state))
+```js
+const UserAvatar = ({ id }) => (
+  <MemoizedRender consumer={State.Consumer}>
+    {state => (
+      <div className="avatar">
+        <img src={state.users[id].avatar.src} />
+      </div>
+    )}
+  </MemoizedRender>
+);
+```
+While `react-copy-write` declares that _ The problem with this is that whenever any value in state changes, UserAvatar will be re-rendered, even though it's only using a single property from a single, nested object._
+This example will work, as long MemoizedRender will track used keys, and perform update only when necessary.
+
+It is also possible to provide `value` as a prop
+```js
+<MemoizedRender value={originalValue}>
+  {values => <Render {...select(values)} />}
+</MemoizeContext>
+```
+
+MemoizedRender __memoizes "render" as a whole__. This is __absolute pure component__. Be carefull. Might be not 100% compatible with async rendering
+if you pass values you were provided down the tree, as long __async accessed keys are not tracked__.
+Thus - MemoizedRender may not react to changes in them.
 
 ## About
 

_tests/memoize.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import createContext from 'create-react-context';
 import Enzyme, {mount} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import Memoize, {MemoizeContext, MemoizedFlow} from '../src';
+import Memoize, {MemoizeContext, MemoizedFlow, MemoizedRender} from '../src';
 
 Enzyme.configure({adapter: new Adapter()});
 
@@ -174,6 +174,67 @@ describe('React memoize', () => {
 
   });
 
+  describe('render', () => {
+    it('render with value', () => {
+
+      const Component = jest.fn().mockImplementation(({value}) => <div>comp - {value}</div>)
+
+      const wrapper = mount(
+        <MemoizedRender value={{key1: 1, key2: 2}}>
+          {values => <Component value={values.key1}/>}
+        </MemoizedRender>
+      );
+
+      expect(Component).toHaveBeenCalledTimes(1);
+      expect(wrapper.html()).toBe("<div>comp - 1</div>");
+
+      wrapper.setProps({value: {key1: 1, key2: 2}});
+      expect(Component).toHaveBeenCalledTimes(1);
+
+      wrapper.setProps({value: {key1: 1, key2: 3}});
+      expect(Component).toHaveBeenCalledTimes(1);
+
+      wrapper.setProps({value: {key1: 1, key2: 3, newKey: 1}});
+      expect(Component).toHaveBeenCalledTimes(1);
+
+      wrapper.setProps({value: {key1: 2, key2: 3, newKey: 1}});
+      expect(Component).toHaveBeenCalledTimes(2);
+      expect(wrapper.html()).toBe("<div>comp - 2</div>");
+
+    })
+
+    it('render with context', () => {
+
+      const Component = jest.fn().mockImplementation(({value}) => <div>comp - {value}</div>)
+      const Context = createContext('test');
+
+      const wrapper = mount(
+        <Context.Provider value={{key1: 1, key2: 2}}>
+          <MemoizedRender consumer={Context.Consumer}>
+            {values => <Component value={values.key1}/>}
+          </MemoizedRender>
+        </Context.Provider>
+      );
+
+      expect(Component).toHaveBeenCalledTimes(1);
+      expect(wrapper.html()).toBe("<div>comp - 1</div>");
+
+      wrapper.setProps({value: {key1: 1, key2: 2}});
+      expect(Component).toHaveBeenCalledTimes(1);
+
+      wrapper.setProps({value: {key1: 1, key2: 3}});
+      expect(Component).toHaveBeenCalledTimes(1);
+
+      wrapper.setProps({value: {key1: 1, key2: 3, newKey: 1}});
+      expect(Component).toHaveBeenCalledTimes(1);
+
+      wrapper.setProps({value: {key1: 2, key2: 3, newKey: 1}});
+      expect(Component).toHaveBeenCalledTimes(2);
+      expect(wrapper.html()).toBe("<div>comp - 2</div>");
+
+    })
+  });
+
   describe('flow', () => {
     it('the flow', () => {
       let lastState = 0;
@@ -214,7 +275,7 @@ describe('React memoize', () => {
       expect(spy2).toHaveBeenCalledTimes(1);
       expect(spy3).toHaveBeenCalledTimes(1);
 
-      wrapper.setProps({input:{...input, page:1}});
+      wrapper.setProps({input: {...input, page: 1}});
       expect(wrapper.text()).toBe('5');
       expect(lastState).toEqual({list: [2, 3], page: 1, sortOrder: 1, filter: null});
 
@@ -232,23 +293,23 @@ describe('React memoize', () => {
         expect(spy3).toHaveBeenCalledTimes(2);
       }
 
-      wrapper.setProps({input:{...input, filter: x => x%2}});
+      wrapper.setProps({input: {...input, filter: x => x % 2}});
       expect(wrapper.text()).toBe('4');
       expect(lastState).toEqual({list: [1, 3], page: 0, sortOrder: 1, filter: null});
 
       expect(spy1).toHaveBeenCalledTimes(2);
       expect(spy2).toHaveBeenCalledTimes(2);
       expect(spy3).toHaveBeenCalledTimes(3);
 
-      wrapper.setProps({input:{...input}});
+      wrapper.setProps({input: {...input}});
       expect(wrapper.text()).toBe('3');
       expect(lastState).toEqual({list: [1, 2], page: 0, sortOrder: 1, filter: null});
 
       expect(spy1).toHaveBeenCalledTimes(3);
       expect(spy2).toHaveBeenCalledTimes(3);
       expect(spy3).toHaveBeenCalledTimes(4);
 
-      wrapper.setProps({input:{...input, sortOrder: -1 }});
+      wrapper.setProps({input: {...input, sortOrder: -1}});
       expect(wrapper.text()).toBe('11');
       expect(lastState).toEqual({list: [6, 5], page: 0, sortOrder: -1, filter: null});
 
@@ -257,7 +318,7 @@ describe('React memoize', () => {
       expect(spy3).toHaveBeenCalledTimes(5);
 
       // try reset flow
-      wrapper.setProps({input:{...input, sortOrder: -1 }, flow:[]});
+      wrapper.setProps({input: {...input, sortOrder: -1}, flow: []});
       expect(wrapper.text()).toBe('11');
       expect(lastState).toEqual({list: [6, 5], page: 0, sortOrder: -1, filter: null});
 

assets/logo.png

@@ -67,7 +67,7 @@
   "homepage": "https://github.com/theKashey/react-memoize#readme",
   "dependencies": {
     "memoize-one": "^3.0.1",
-    "memoize-state": "^1.3.3",
+    "memoize-state": "^1.4.1",
     "prop-types": "15.5.10",
     "react-lifecycles-compat": "^1.1.0"
   }

package.json

@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import memoizeState from 'memoize-state';
+
+/* eslint-disable no-underscore-dangle, react/no-multi-comp */
+
+class MemoizedRenderIndirect extends PureComponent {
+  static propTypes = {
+    value: PropTypes.any.isRequired,
+  };
+
+  render() {
+    return this.props.value;
+  }
+}
+
+const deproxifyShouldDive = (data, key, a) => key === '_owner' && a.$$typeof && a._store;
+
+export class MemoizedRender extends PureComponent {
+  static propTypes = {
+    children: PropTypes.func.isRequired,
+    value: PropTypes.object,
+    consumer: PropTypes.any,
+  };
+
+  static defaultProps = {
+    value: null,
+    consumer: null,
+  };
+
+  state = {
+    children: memoizeState(this.props.children, { flags: { deproxifyShouldDive } }),
+  };
+
+  renderProp = value => (
+    <MemoizedRenderIndirect value={this.state.children(value)} fn={this.state.children} />
+  );
+
+  render() {
+    const { value, consumer: Consumer } = this.props;
+
+    if (value) {
+      return this.renderProp(value);
+    }
+    if (this.props.consumer) {
+      return <Consumer>{this.renderProp}</Consumer>;
+    }
+    return null;
+  }
+}

src/MemoizedRender.js

@@ -1,11 +1,13 @@
 import MemoizeDefault, { MemoizeOne, MemoizeState } from './Memoizer';
 import { MemoizeContext } from './Context';
+import { MemoizedRender } from './MemoizedRender';
 import { MemoizedFlow } from './Waterflow';
 
 export {
   MemoizeOne,
   MemoizeState,
   MemoizeContext,
+  MemoizedRender,
   MemoizedFlow,
 };
 

src/index.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {storiesOf} from '@storybook/react';
 
-import Memoize from '../src';
+import Memoize, {MemoizedRender} from '../src';
 
 
 const heavyFunction = (list, count) => {
@@ -77,5 +77,50 @@ class Test1 extends Component {
   }
 }
 
+
+class TestMemoizedRender extends Component {
+  state = {
+    count: 1,
+    generation: 0,
+    list: new Array(50).fill(1).map((x, index) => index)
+  };
+
+  componentDidMount() {
+    setInterval(() => this.setState({generation: this.state.generation + 1}), 1000);
+  }
+
+  decC = () => this.setState(({count}) => ({count: count - 1}));
+  incC = () => this.setState(({count}) => ({count: count + 1}));
+
+  render() {
+    return (
+      <div>
+        Valuable:
+        <button onClick={this.decC}>-</button>{this.state.count}
+        <button onClick={this.incC}>+</button>
+        <span> gen : {this.state.generation}</span>
+
+        <MemoizedRender
+          value={this.state}
+        >{state => {
+          const {list, time} = heavyFunction(state.list, state.count);
+          return (
+            <div>
+              render #{this.state.generation}, updated {Math.round((Date.now() - time) / 1000)} seconds ago
+              <ul>
+                {list.map(x => <li key={x}>{x}</li>)}
+              </ul>
+            </div>
+          )
+        }
+        }
+        </MemoizedRender>
+      </div>
+    );
+  }
+}
+
+
 storiesOf('Memoize', module)
   .add('example', () => <Test1/>)
+  .add('MemoizedRender', () => <TestMemoizedRender/>)

stories/index.js

@@ -5125,9 +5125,9 @@ memoize-one@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.0.1.tgz#7b599850bb41be8beed305f4eefd963c8cea9a0a"
 
-memoize-state@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/memoize-state/-/memoize-state-1.3.3.tgz#061d5054f4d85de011c4258c3a20eab80531341a"
+memoize-state@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/memoize-state/-/memoize-state-1.4.1.tgz#f2e84f56d2da2c61dfb54f0f333a80bd404970f9"
   dependencies:
     function-double "^1.0.1"
     proxyequal "^1.5.0"