Input lag / many rerenders

[tobeycodes]

🐛 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

Suggested solution(s)

I do not know

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

[ersel]

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);

[johnrom]

@schrapel in v2 I don't believe fast field is implemented at this time. There is some movement on this PR: #1772

[100ideas]

@ersel thanks for sharing your <FastInputField /> solution!

I put together a formik-playground demo app to help myself learn and I included a section demonstrating your approach - hope that's ok!

https://github.com/100ideas/100ideas-formik-playground

https://ideas-formik-playground.web.app/

[ersel]

No worries @100ideas , my pleasure.