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 propsdefault 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.

0

Start asking to get answers

Find the answer to your question by asking.

Explore related questions

See similar questions with these tags.