create-formik-fields-comparator
v1.2.0
Published
Simple utility to help avoiding unnecessary re-renders in Formik forms
Downloads
3
Readme
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
$ npm install create-formik-fields-comparator --save
Then feel free to use it in the shouldComponentUpdate
lifecycle of your form fieldset or field components.
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 (
<input
name="email"
value={this.props.values.email}
onChange={this.props.onChange}
/>
);
}
}
Or with recompose
.
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,
}) => (
<input
name="email"
value={values.email}
onChange={onChange}
/>
);
const enhance = shouldUpdate(createFormikFieldsComparator(['email']));
export default enhance(MyComponent);
Full Example with Recompose and Yup
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.
/** 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'),
});
/** 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
}) => (
<Fragment>
<input
type="email"
name="email"
onChange={onChange}
onBlur={onBlur}
value={values.email}
/>
{errors.email && touched.email && <div>{errors.email}</div>}
</Fragment>
);
const enhance = shouldUpdate(
createFormikFieldsComparator(['email'])
);
export default enhance(EmailInput);
/** 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
}) => (
<Fragment>
<input
type="text"
name="facebook"
onChange={onChange}
onBlur={onBlur}
value={values.facebook}
/>
{errors.facebook && touched.facebook && <div>{errors.facebook}</div>}
<input
type="text"
name="twitter"
onChange={onChange}
onBlur={onBlur}
value={values.twitter}
/>
{errors.twitter && touched.twitter && <div>{errors.twitter}</div>}
</Fragment>
);
const enhance = shouldUpdate(
createFormikFieldsComparator(['facebook', 'twitter'])
);
export default enhance(SocialFieldset);
/** 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,
}) => (
<form onSubmit={handleSubmit}>
{/**
*
* The EmailInput will only update when
* something related to the fields it is interested to change
*
**/}
<EmailInput
values={values}
errors={errors}
touched={touched}
onChange={handleChange}
onBlur={handleBlur}
/>
{/**
*
* The SocialFieldset will only update when
* something related to the fields it is interested to change
*
**/}
<SocialFieldset
values={values}
errors={errors}
touched={touched}
onChange={handleChange}
onBlur={handleBlur}
/>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</form>
);
const enhance = withFormik({
handleSubmit: (values, actions) => {
/** do something on submit */
},
mapPropsToValues = props => ({
email: null,
facebook: null,
twitter: null
}),
validationSchema: FormSchema
});
export default enhance(Form);
Contributors
- Armando Magalhaes