this is the code I wrote
import React from 'react';
import {defaultMemoize} from 'reselect';
import PropTypes from 'prop-types';
class PropsDataAdapter extends React.PureComponent {
static propTypes = {
propDataAdapter: PropTypes.func,
children: PropTypes.node,
propsEqualityChecker: PropTypes.func, //if not provided equality check will be this.props !== nextProps same as for PureComponent
};
constructor(props) {
super(props);
this.setUpAdapterFunction(props);
}
componentWillReceiveProps(nextProps) {
const props = this.props;
if (props.propDataAdapter !== nextProps.propDataAdapter) {
this.setUpAdapterFunction(nextProps);
}
}
setUpAdapterFunction(props) {
this.propsDataAdapterFunc = defaultMemoize(props.propDataAdapter, props.propsEqualityChecker);
};
render() {
const ChildComponent = this.props.children;
return (<ChildComponent {...this.propsDataAdapterFunc(this.props)}/>);
}
};
export default PropsDataAdapter;
what it does is rather then wrapping functions in defaultMemoize use this component which will wrap around the component which need adapted props default memoize used to will have cache size of 1 provide propsDataAdapter for adaption of props whatever props provided will be provided as arguments to adapter. Usage goes like this
<PropsDataAdapter
propDataAdapter={adaptPropsForChildren}
>
{ChildComponent}
</PropsDataAdapter>);
Does it seem as a good way what this component does is just uses defaultMemoize so that you dont have to think about calculations in constructor or componentWillRecieveProps or memoizing themselves you just need to write an adapter function which will do that for you in which you can use _map/Object.assign and create new references.