React-final-form: Formik FastField equivalent in react-final-form?

[mohsinulhaq]

Question

I wanted to to know how can I make particular fields not rerender whole form. Just like FastField does in Formik.

[erikras]

Formik added FastField as an afterthought. React Final Form was designed with that kind of optimization from the beginning.

You can tell the Form tag specifically what part of form state you want it to rerender for.

Check out the optimization example, or you can watch me demonstrate it here.

[mohsinulhaq]

Thanks a lot @erikras
I had one more issue that I had raised a couple of days ago: https://github.com/final-form/react-final-form/issues/552
Could you please help me out?

[mohsinulhaq]

@erikras Hi, I tried your suggestion. I guess my intention with this question was more related to not triggering validation on one field when other fields change, than just preventing rerendering the component. Sorry for not being clear, I assumed stopping rerender will automatically stop validation on that field.
https://codesandbox.io/s/eloquent-currying-l64tq
Here is a codesandbox.
It has the most restrictive subscription added, to do minimal re-renders.
But field level validations still get triggered when the other field change.

Ideally, I would want for level validation to run on each field change (like it does right now), but for field level validation, I would like to control when to run the validation.

[erikras]

Sure. We've got that covered, too. There's a validateFields prop on Field that lets you control which fields are validated when that field changes. To validate only the field that changed, you should put validateFields={[]}.

Docs

[mohsinulhaq]

Wow! This is great! Thanks a lot @erikras. You are awesome! 😄

[erikras]

I've seen a few forms use cases in my day. 😉