formik-observer icon indicating copy to clipboard operation
formik-observer copied to clipboard

Compare old value and new value instead

Open jmaicaaan opened this issue 6 years ago • 0 comments

I think we can do something like this to prevent calling of onChange multiple times.. Let me know your thoughts

import React from 'react';

import { debounce, isEqual } from 'lodash';

class FormObserver extends React.Component {

  state = {
    currentFormValues: undefined
  }

  onChange = debounce((data, options) => this.props.onChange(data, options), 250)

  componentWillReceiveProps(props) {
    const { onChange, values, ...options } = props;

    if (!isEqual(values, this.state.currentFormValues)) {
      this.state.currentFormValues = values;
      this.onChange(values, options)
    }
  }

  render() {
    return null
  }
}

export default FormObserver;

jmaicaaan avatar Oct 07 '18 08:10 jmaicaaan