useFormState effect doesn't depend on onChange callback

skoob13 commented 5 years ago

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

onChange callback doesn't update when it updates in FormSpy component.

What is the expected behavior?

useFormState effect should depend on onChange callback.

Sandbox Link

https://codesandbox.io/s/react-final-form-simple-example-d8www?fontsize=14

Steps to reproduce:

Enter some text
Increment ID
Enter some text and look into PRE, it doesn't update

What's your environment?

I use React Native, but the issue persists on Code Sandbox as well.

info
  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      Memory: 107.81 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.1 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.7.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: ^0.59.1 => 0.59.4
    npmGlobalPackages:
      react-native-cli: 2.0.1

Final Form: 4.16.1 React Final Form: 6.3.0

Other information

I'm not sure it's a bug. If it is, I will submit a pull request.

TylerRick commented 5 years ago

I'm curious, is it really expected behavior for the FormSpy to be able to detect a change to the id state that isn't managed by Final Form?

I don't claim to be an expert, so I hope someone who is an expert chimes in regarding your specific question about the useEffect dependency, but I do know a couple workarounds in case that's helpful (you may have already found workarounds)...

One workaround is to simply move id into the form (as a hidden input, for example) and let react-final-form manage it as part of its state (form.values). Then you can use a mutator to update that state. Working example here: https://codesandbox.io/s/react-final-form-simple-example-euh8y

Another workaround is to add a key prop:

            <FormSpy
              key={id}

(as seen here)

fzaninotto commented 5 years ago

I think it's fixed by #572

final-form / react-final-form