react-memo's Introduction

react-memo

React.memo polyfill

What: https://reactjs.org/docs/react-api.html#reactmemo
Why: https://medium.com/@trekinbami/using-react-memo-and-memoization-1970eb1ed128
When: React.memo was introduced in [email protected]. You can use this polyfill until you upgrade your components

Install

$ yarn add react-memo-polyfill

Usage

import memo from 'react-memo-polyfill'

function MyComponent(props) { }

memo(MyComponent)

Optionally pass your compare function

import memo from 'react-memo-polyfill'

function MyComponent(props) { }
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default memo(MyComponent, areEqual);

Author

@zzarcon

react-memo's People

Stargazers

Watchers

react-memo's Issues

Bug: shallowCompare doesn't work if the objects have different keys

The current shallowCompare implementation doesn't work if the objects have different keys

You can try shallowCompare with the following code :

console.log(shallowCompare({ a: 1, b: 1 }, { a: 1 }));
console.log(shallowCompare({ a: 1 }, { a: 1, b: 1 }));

shallowCompare({ a: 1, b: 1 }, { a: 1 }) => true

This is because we only iterate on the keys of nextProps, ignoring any extra props in prevProps.

Support static method of Function Components

Function components may have static methods.

function MyComponent() {
	return <div>helloworld</div>
}
MyComponent.getName = function() {
	return this.name;
}
console.log(MyComponent.getName()); // MyComponent;
console.log(memo(MyComponent).getName()) // throw error