react-final-form icon indicating copy to clipboard operation
react-final-form copied to clipboard

react final form decorator loses previous value

Open Maxim1saev opened this issue 3 years ago • 2 comments

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

Maxim1saev avatar Jun 07 '21 11:06 Maxim1saev

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.

BATCOH avatar Jun 07 '21 11:06 BATCOH

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), }, }); }, []);

nexun avatar Jul 21 '21 12:07 nexun