Formik: Input lag / many rerenders

Created on 9 Aug 2019 · 4Comments · Source: formium/formik

🐛 Bug report

Current Behavior

If I make a change to a input it re-renders all the fields 2 times (in the codesandbox example with the autosave component comment out). If I enable the autosave (as the codesandbox is when opened) if you make a change to an input it rerenders each field 6 times.

When I have 30 fields. It is doing thousands of rerenders :(

Expected behavior

When making changes to fields it should not be re-rendering the fields more than once and my understanding of FastField is that only the single field will re-render.

Reproducible example

https://codesandbox.io/s/adoring-boyd-zsfog?fontsize=14

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.0.1-rc.12
| React | 16.8.6
| TypeScript | N/A
| Browser | Firefox
| npm/Yarn | N/A
| Operating System | MacOS

stale

Source

schrapel

👍1

Most helpful comment

I run into a similar problem, and rolled my own "fast field" which looks like this...

import React from "react";
import { Input } from "reactstrap";
import { connect, getIn } from "formik";

class FastInputField extends React.Component {
  shouldComponentUpdate(nextProps) {
    const { name, formik } = this.props;
    if (nextProps.name !== name) {
      return true;
    }
    const nextValue = getIn(nextProps.formik.values, name);
    const previousValue = getIn(formik.values, name);
    if (nextValue !== previousValue) {
      return true;
    }
    return false;
  }

  render() {
    const { name, formik, row, validateForm } = this.props;
    const value = getIn(formik.values, name);

    return (
      <Input
        value={value}
        type="text"
        onChange={e => {
          formik.setFieldValue(name, e.target.value);
        }}
      />
    );
  }
}

export default connect(FastInputField);

ersel on 14 Aug 2019

❤1 🎉1

All 4 comments

I run into a similar problem, and rolled my own "fast field" which looks like this...

import React from "react";
import { Input } from "reactstrap";
import { connect, getIn } from "formik";

class FastInputField extends React.Component {
  shouldComponentUpdate(nextProps) {
    const { name, formik } = this.props;
    if (nextProps.name !== name) {
      return true;
    }
    const nextValue = getIn(nextProps.formik.values, name);
    const previousValue = getIn(formik.values, name);
    if (nextValue !== previousValue) {
      return true;
    }
    return false;
  }

  render() {
    const { name, formik, row, validateForm } = this.props;
    const value = getIn(formik.values, name);

    return (
      <Input
        value={value}
        type="text"
        onChange={e => {
          formik.setFieldValue(name, e.target.value);
        }}
      />
    );
  }
}

export default connect(FastInputField);

ersel on 14 Aug 2019

❤1 🎉1

@schrapel in v2 I don't believe fast field is implemented at this time. There is some movement on this PR: https://github.com/jaredpalmer/formik/pull/1772