createFormikFieldsComparator

Simple NPM module to help avoiding unnecessary re-renders in Formik form field components.

Mainly inspired by this article: https://travix.io/using-recompose-hocs-to-get-better-performance-in-forms-using-formik-and-yup-e51024d645ba

Sorry for the long name thou :smile:

Usage

``sh
$ npm install create-formik-fields-comparator --save
`

Then feel free to use it in the shouldComponentUpdate lifecycle of your form fieldset or field components.

`js
import React from 'react';
import createFormikFieldsComparator from 'create-formik-fields-comparator';

/**
* Example MyComponent
*
* This is a class based example of how you would
* use this utility inside your component lifecycle
*/
export default class MyComponent extends React.Component {
shouldComponentUpdate(prevProps, nextProps) {
const compare = createFormikFieldsComparator(['email']);
return compare(prevProps, nextProps);
}

render() {
return (
name="email"
value={this.props.values.email}
onChange={this.props.onChange}
/>
);
}
}
`

Or with recompose.

`js
import React from 'react';
import shouldUpdate from 'recompose/shouldUpdate';
import createFormikFieldsComparator from 'create-formik-fields-comparator';

/**
* Example MyComponent
*
* This is a stateless version
* of how you would use this utility
* inside your components.
*
* Note how this component only
* cares about the email field.
*/
const MyComponent = ({
values,
onChange,
}) => (
name="email"
value={values.email}
onChange={onChange}
/>
);

const enhance = shouldUpdate(createFormikFieldsComparator(['email']));

export default enhance(MyComponent);
`

$3

> Disclaimer: I made this thinking about its usage with libraries like recompose or proppy. I would recommend to use this in combination with one of these two libraries, or at least with homemade higher order components.

`js
/* FormSchema.js /
import object from 'yup/lib/object';
import string from 'yup/lib/string';

export default object({
email: string().nullable().required('Type an email'),
facebook: string().nullable().required('Type your facebook'),
twitter: string().nullable().required('Type your twitter'),
});
`

`js
/* EmailInput.js /
import React, { Fragment } from 'react';
import shouldUpdate from 'recompose/shouldUpdate';
import createFormikFieldsComparator from 'create-formik-fields-comparator';

const EmailInput = ({
values,
errors,
touched,
onChange,
onBlur
}) => (

type="email"
name="email"
onChange={onChange}
onBlur={onBlur}
value={values.email}
/>
{errors.email && touched.email &&

export default enhance(EmailInput);
`

`js
/* SocialFieldset.js /
import React, { Fragment } from 'react';
import shouldUpdate from 'recompose/shouldUpdate';
import createFormikFieldsComparator from 'create-formik-fields-comparator';

const SocialFieldset = ({
values,
errors,
touched,
onChange,
onBlur
}) => (

type="text"
name="facebook"
onChange={onChange}
onBlur={onBlur}
value={values.facebook}
/>
{errors.facebook && touched.facebook &&

export default enhance(SocialFieldset);
`

`js
/* Form.js /
import React from 'react';
import { withFormik } from 'formik';

import FormSchema from './FormSchema';
import EmailInput from './EmailInput';
import SocialFieldset from './SocialFieldset';

const Form = ({
values,
errors,
touched,
handleSubmit,
handleChange,
handleBlur,
handleReset,
isSubmitting,
}) => (


export default enhance(Form);
``

Contributors

- Armando Magalhaes