[BUG] Form decorators should not change from one render to the next as new values will be ignored

[adamklepacz]

trafficstars

Are you submitting a bug report or a feature request?

Please guys check the code down below in the sandbox. The same decorators but getting an error about decorators change. It is probably a bug. Cause when I console.log decorators they're always the same but I'm getting an error: Form decorators should not change from one render to the next as new values will be ignored

What is the current behavior?

Getting an error about decorators change. but they're the same. Check screenshot:

What is the expected behavior?

Should not throw an error if the decorators are the same.

Sandbox Link

https://codesandbox.io/s/naughty-panini-ycjd9?file=/src/App.js

What's your environment?

"react-final-form": "^3.6.3", "final-form": "^4.8.1", "final-form-arrays": "^1.0.4", "final-form-calculate": "^1.2.1",

Other information

[BMCwebdev]

You ever make any progress on this @adamklepacz ? Having same issue.

[evgeny-t]

You can either wrap createDecorator with useEffect or move it outside of the render.

const rentTypeDecorator = useMemo(() => createDecorator(
    {
      field: 'details.base_rent_and_operation',
      updates: {
        'details.fixed_rent': (baseRentAndOperationValue) => !baseRentAndOperationValue,
      },
    },
    {
      field: 'details.fixed_rent',
      updates: {
        'details.base_rent_and_operation': (fixedRentValue) => !fixedRentValue,
      },
    },
  ), [])

[justinsgithub]

Move the createDecorator function outside of the function component

` import this from this import that from that

const focusOnError = createDecorator()

export const App = () => { all my App code } `