final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.39k stars 481 forks source link

react final form decorator loses previous value #921

Open Maxim1saev opened 3 years ago

Maxim1saev commented 3 years ago

To find out if a field has been changed, you need to compare it with the previous value, but if the state is updated in the component where <FinalForm ... />, then prevValues in decorators is reset to zero image

BATCOH commented 3 years ago

It's hard to say what might be wrong without seeing more code, but is it possible that your decorators are declared inside a component that contains <FinalForm ... />? Functions declared inside a react component are actually re-created on every render, so it may be a good idea to move them outside or memoize them with useCallback.

nexun commented 3 years ago

I had a similar problem making a form wizard, the decorator reset the value when I changed view and I solved it by putting the decorator in a useMemo hook, so that it does not re-render when the state of the form changes

const decoratorWithMemo = useMemo(() => { createDecorator({ field: 'minimum', updates: { maximum: (minimumValue, allValues) => Math.max(minimumValue || 0, allValues.maximum || 0), }, }); }, []);