npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-memoize

v1.0.1

Published

Memoized mapStateToProps on component level

Downloads

49

Readme

7kb MobX-level memoization library, which tracks all the arguments you are really depends on.

  • It is not so fast, as reselect, but could handle more cases, and works out of the box.
  • It is not so fast, but much faster, than VDOM tree comparison you will face in case of render trashing.
  • It contain 3 types of memoziation to handle all possible cases.

Uses memoize-state underneath, providing the same magic for get as immer provided to set.

Works fine in all browsers including IE11.

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 Could change the way you did componentWillReceiveProps, could replace getDerivedStateFromProps, could make things better.

IE11+, React 15 and React 16.3 compatible.

  • Memoize - to create declarative memoized selection.
  • MemoizedFlow - to create declarative memoized flow.
  • MemoizeContext - to create memoized selector from context(or any Consumer).
  • 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

 import Memoize from 'react-memoize';
 
 <Memoize
   prop1 = "theKey"
   state = {this.state}
   // 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>

There is only one prop - compute, all others will be passed inside. Memoize get compute function, add passes all the other props to it, streaming result to the render prop.

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

Flow

getDerivedStateFromProps gives you ability to from a new state from props, while componentDidUpdate enables you to react to the state changes.

MemoizedFlow is getDerivedStateFromState. Following example react to the state changes, allowing to change ordering of rows and applies a pagination.

"The Flow" is safe and performant way to form something from something, and rebuilt then the time calls.

import {MemoizedFlow} from 'react-memoize';

class SortablePageableTable extends Component {
    state = {
    page:0,
    perPage:10,
    filter: I => I
    };
    
    onSortChange = (order) => this.setState(order)
    onPageChange = page => this.setState(page);
    
    render () {
    return (
          <MemoizedFlow 
          input={{...this.props, ...this.state}}
          flow={[
            // will react on rows or filter change
            ({rows, filter}) => ({rows: list.filter(filter)}),
            // will react on rows(from step1) change or order
            ({rows, order}) => ({rows: list.slice().sort(order)}), // !! clone array before sort
            // will react on rows and pagination changes
            ({rows, page, perPage}) => ({rows: list.slice(page*perPage, (page+1)*perPage)}),
            // will react on something else, not related
            ({rain, bows}) => ({rainbows: rain+bows, rain: null, bows: null })
            ]}
          >
            {output => <Table {...output} onSortChange={this.onSortChange} onPageChange={this.onPageChange}/>}
          </MemoizedFlow>
    }
}

<SortablePageableTable rows = {tableRows} />

First step is getting input, and each following is reading from a value provided before, spreading own result over it. Until the last step will be reached, and output will be provided to render prop.

Each step is memoized, as usual, and will always reuse value from the steps before.

MemoizeContext

React memoize also provides component to select and memoize data from React16 context, or any other component which will pass some values into renderProp.

import {MemoizeContext} from 'react-memoize';

<Context.Provider value={{prop1: 1, prop2: 2, prop3: 3}}>
    <MemoizeContext consumer={Context.Consumer} selector={select}>
      {values => <Render {...values} />}
    </MemoizeContext>
</Context.Provider>

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.

<MemoizeContext consumer={Consumer} prop1={1} anotherProp={3} selector={select}> />

// will result

<Consumer prop1={1} anotherProp={3}>
{ contextValues => <ReactMemoize {...contextValues} compute={selector}>...</ReactMemoize>}
</Consumer>

This is like Redux without dispatching. State in context, selector aka mapStateToProps, and magic memoization in between.

See it in action -> https://codesandbox.io/s/xjz5y3wzrz 🛠

MemoizedRender

MemoizedRender is mostly usable with Context API

import {MemoizedRender} from 'react-memoize';

<Context.Provider value={{prop1: 1, prop2: 2, prop3: 3}}>
    <MemoizedRender consumer={Context.Consumer}>
      {values => <Render {...select(values)} />}
    </MemoizedRender>
</Context.Provider>

Or, the better example (from react-copy-write)

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

<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

React-memoize uses memoize-state underneath to perform MobX like memozation and achive the maximal minimal level of memoization cache misses. Sounds a bit strange, but this mean - react-memoize will try to preserve the current state at all costs. From 10% to 50% "more" in comparison.

In all the cases only ONE! result is memoized. The goal of the component is to cut off updates.

For example:

  • recomputation will be made only when stateSubKey is changed
 <Memoize
   state = {this.state}   
   compute={({state}) => soSomethingWith(state.stateSubKey)}
  >
  { result => ....}
  </Memoize>
  • recomputation will be made only when used prop is changed
 <Memoize
   usedProp = {1}   
   unusedProp = {2}
   compute={({usedProp}) => soSomethingWith(usedProp)}
  >
  { result => ....}
  </Memoize>
  • recomputation will be make only when item count changes, value of any item or text of items passed thought the filter.
 <Memoize
   list = {this.state.list}   
   compute={({list}) => list.filter(item => item.value).map(item => item.text)}
  >
  { result => ....}
  </Memoize>

The same magic as in beautiful-react-redux, kudos to memoize-state library.

PS: For systems without Proxy support memoize will use memoize-one

Licence

MIT