Skip to content

Instantly share code, notes, and snippets.

@nikparo
Created October 6, 2020 18:20
Show Gist options
  • Save nikparo/b6b6a8bfa3891093c3efe73d7cb36f46 to your computer and use it in GitHub Desktop.
Save nikparo/b6b6a8bfa3891093c3efe73d7cb36f46 to your computer and use it in GitHub Desktop.
React.memo: Shallowly compare props except for `style`, which is best shallowly compared on its own.
import React from 'react';
import shallowEqual from 'shallowequal';
function customizer(valueA, valueB, propName) {
if (propName === 'style') {
return shallowEqual(valueA, valueB);
}
return undefined;
}
function styleAndPropsAreEqual(prevProps, nextProps) {
return shallowEqual(prevProps, nextProps, customizer);
}
// Shallowly compare props except for 'style', which is best shallowly compared on its own.
export function styleMemo(Component) {
return React.memo(Component, styleAndPropsAreEqual);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment