How to use the recompose.withPropsOnChange function in recompose

updateValue: ({ setFormState }) => expression => {
      setFormState({
        expression,
        dirty: true,
      });
    },
    setExpression: ({ setExpression, setFormState }) => exp => {
      setFormState(prev => ({
        ...prev,
        dirty: false,
      }));
      setExpression(exp);
    },
  }),
  expressionLifecycle,
  withPropsOnChange(['formState'], ({ formState }) => ({
    error: (function() {
      try {
        // TODO: We should merge the advanced UI input and this into a single validated expression input.
        fromExpression(formState.expression);
        return null;
      } catch (e) {
        return e.message;
      }
    })(),
  })),
  branch(props => !props.element, renderComponent(ElementNotSelected))
)(Component);

ev.dataTransfer.setData('text', `x-slate:${type}`);
};

@connect(
  ({ location }) => ({
    pathname: location.pathname,
    query: location.query,
  }),
  dispatch => ({
    setQuery: createReplaceQuery(dispatch),
  }),
)
@enhance
@withState('collapsed', 'setCollapsed', true)
@getSchema
@withPropsOnChange(['schema'], ({ schema = {} }) => {
  const types = Object.keys(schema.nodes || {}).map(key => ({
    ...schema.nodes[key].slate,
    type: key,
  }));
  const categories = {};
  const menuItems = [];
  sortBy(types, ['category', 'label']).forEach(action => {
    const item = (
       null}
        onDragStart={dragStart(action.type)}
        // icon={}
      >
        {action.label || action.type}

loadingError: false,
    name: "mapnik",
    source: "osm",
    title: "Open Street Map",
    type: "osm",
    visibility: true
};


module.exports = compose(
    defaultProps({
        onMapReady: () => {},
        baseLayer: defaultBaseLayer

    }),
    withPropsOnChange("baseLayer", props => {
        return {layers: [props.baseLayer]};
    }),
    withStateHandlers(() => ({
        map: { projection: "EPSG:4326" },
        initialized: false
    }),
    {
        onMapViewChanges: () => (map) => ( {map}),
        onLayerLoad: ({map, initialized}, {onMapReady, baseLayer}) => (layerId) => {
            // Map is ready when background is loaded just first load
            if (!initialized && layerId === baseLayer.id) {
                onMapReady(map);
                return {initialized: true};
            }
            return {};
        },

console.log('SDK Tiny MCE upload', body)

      github.upsertFiles(body)
        .then(resp => {
          getFileDownloadUrl(file.path).then(fileUrl => {
            notifier.success(`Uploaded file: ${file.path}`)
            success(fileUrl)
          })
        }).catch(err => {
          notifier.bad(err)
          failure(err)
        })
    }
  }),
  withPropsOnChange(['content'], ({ content = '', setEditorContent }) => {
    setEditorContent(content)
  })
)(TinyMCE)

if (newUrl.indexOf('/upload/') !== -1) {
    return newUrl.replace('/upload/', `/upload/${crop}${query}/`);
  } else if (newUrl.indexOf('/fetch/') !== -1) {
    return newUrl.replace('/fetch/', `/fetch/${crop}${query}/`);
  }
};


const enhance = compose(
  getContext({
    amp: PropTypes.bool,
  }),
  withState('cWidth', 'setCWidth', undefined),
  withState('isLoaded', 'setIsLoaded', false),
  withState('responsiveSize', 'setResponsiveSize', {}),
  withPropsOnChange(['value', 'options', 'responsiveSize'], ({ value, options, responsiveSize }) => ({
    url: cloudinaryUrl(value, options, responsiveSize),
  })),
);

@enhance
class Image extends Component {
  componentDidMount() {
    this.node = ReactDOM.findDOMNode(this);
    if (this.node) {
      this.onResize(this.node.getBoundingClientRect());
    }
  }

  onResize = ({ width, height }) => {
    const { setResponsiveSize } = this.props;
    setResponsiveSize({ width: Math.floor(width), height: Math.floor(height) });

history.push('/logout')
      }
    }
  }),
  withPropsOnChange(['pageNumber'], ({ getRepos, pageNumber, setRepoList, setPages, setPageNumber }) => {
    const cachedRepoList = storage.get(`repos`) ? storage.get(`repos`)[`page_${pageNumber}`] : null

    if (!cachedRepoList || cachedRepoList.length <= 0) {
      getRepos()
    } else {
      setRepoList(cachedRepoList['repos'])
      setPages(cachedRepoList['pages'])
      setPageNumber(cachedRepoList['pages'])
    }
  }),
  withPropsOnChange(['location'], ({ location }) => {
    if (typeof window.gtag === 'function') {
      window.gtag('config', process.env.REACT_APP_GA_TRACKING, { 'page_path': location.pathname })
    }
  }),

  lifecycle({
    componentWillMount () {
      const { githubError } = this.props

      github.on('err', githubError)
    },
    componentWillUnmount () {
      const { githubError } = this.props

      github.off('err', githubError)
    }

defaultData: {
        bins: defaultBins,
        max: defaultMax,
        min: defaultMin,
        quarter: defaultQuarter,
      },
    });
  }),
  withPropsOnChange(
    (props, nextProps) =>
      props.variable.continuousBinType !== nextProps.variable.continuousBinType,
    ({ variable: { continuousBinType } }) => ({
      binsAreCustom: continuousBinType !== DEFAULT_BIN_TYPE,
    })
  ),
  withPropsOnChange(
    (props, nextProps) => !(
      isEqual(props.defaultData, nextProps.defaultData) &&
      isEqual(props.variable.customInterval, nextProps.variable.customInterval) &&
      isEqual(props.variable.customRanges, nextProps.variable.customRanges)
    ),
    ({
      defaultData,
      dispatch,
      fieldName,
      id,
      variable,
    }) => ({
      openCustomBinModal: () => dispatch(setModal(

onComplete: props._onChangeDefaultRole,
            selectedRole: props.defaultRole,
            allowOwner: false,
            allowAdmin: false,
          },
          selected: 'controlledRolePicker',
        },
      ])
    )
  },
})

const ConnectedMakeOpenTeamConfirm: React.ComponentType = compose(
  withState('teamNameInput', 'onChangeTeamNameInput', ''),
  withState('defaultRole', '_onChangeDefaultRole', 'reader'),
  withPropsOnChange(['teamNameInput'], (props: OpenTeamConfirmProps & OpenTeamSettingProps) => ({
    confirmEnabled: props.teamNameInput === props.routeProps.get('actualTeamName'),
  })),
  connect(undefined, mapDispatchToProps)
)(MakeOpenTeamConfirm)

const ConnectedMakeTeamClosed: React.ComponentType<
  OpenTeamSettingProps
> = connect(undefined, (dispatch, props: OpenTeamSettingProps) => ({
  onMakeTeamClosed: () => {
    dispatch(Creators.makeTeamOpen(props.routeProps.get('actualTeamName'), false, 'reader'))
    dispatch(props.navigateUp())
  },
}))(MakeTeamClosed)

export {ConnectedMakeOpenTeamConfirm, ConnectedMakeTeamClosed}

export default (Component: ReactClass<*>) =>
  compose(
    withRouter,
    withPropsOnChange(
      ['filters', 'selectedIds'],
      ({ filters, selectedIds }) => {
        const downloadFilters =
          selectedIds && selectedIds.length
            ? addInFilters(
                ...filters,
                makeFilter(
                  [
                    {
                      field: 'cases.case_id',
                      value: selectedIds,
                    },
                  ],
                  false,
                ),
              )