CODEWITHSUNDEEP
react-final-formfinal-form
romject
romject

Reputation: 23

React Final Form re-renders all fields while changing one of them

It is written in docs, that

The <Field/> will rerender any time the field state it is subscribed to changes.

So, if I'd have several Fields, all of them will be re-rendered, while changing only one of them. Are there any ways to prevent re-renders of other Fields, that are not changing at the moment?

Upvotes: 2

Views: 6451

Answers (2)

Nikola Andreev
Nikola Andreev

Reputation: 634

Another workaround is to use React.memo (react version >= 16.6.0)

Make each input field a separate component an wrap it in memo.

export default React.memo(MyInputComponent);

If you are passing values down to MyInputComponent, pass only the needed prop value not the whole form data object.

<MyInputComponent value={formData.myValue} />

This way the MyInputComponent will re render only if formData.myValue has changed.

Upvotes: 5

Erik R.
Erik R.

Reputation: 7272

Yes, that's because your entire form is rerendering. Your question is exactly the reason that Final Form was designed from the ground up to allow fine grained render control.

Here's a video of me explaining it last month.

Check out this example of how to do it.

Upvotes: 5

Related Questions