Repository navigation
Use of useRef is incorrect #339
Description
I noticed that the use of references is incorrect, at least in the way that I believe the library is meant to be used.
When calling registerField, you are passing a ref's value (ref.current) as opposed to the ref. This means that if the ref ever updates, unform will never see the update. This is because you are passing the value of the ref and not the ref itself. In order to maintain a guaranteed connection with the field, you must accept the ref, not the value.
A simple workaround is to pass the ref's value to the useEffect that calls registerField, though I don't know if calling registerField multiple times for the same field results in expected behavior.
At any rate, I've updated the playground to show an example of how passing the value of the ref can break things:
To test:
- Type some data into the
First Namefield. - Click on
Toggle First Nameto remove the input. - Then click the button again to bring it back.
- Type some more data into
First Name - Click
Reset
Observe that the field does not reset, and if you click save, the value does not appear.
Activity
carlosallexandre commentedon Jan 16, 2021
Hey @kkirby,
I got the problem. It could be solved in many ways. But, trying somethings, i got this simple solution if you need:
Sandbox forked from yours
Tell me if it worked for you.
kkirby commentedon Jan 21, 2021
@carlosallexandre Your solution isn't really a fix to this issue. It's more of a workaround.
carlosallexandre commentedon Jan 21, 2021
@kkirby
Indeed, i agree. But let's see some points:
if u toggle your input outside of component (really unmount) you see it works properly (without "workaround"). Why? Because unregisterField, called inside useField when component is unmounted, will remove the inputRef from the array where it stored, so this way when mount again the inputRef will be updated.
In your use case you don't unmount the entirely component and a change on inputRef.current doesn't dispatch a re-render. So, even if you put inputRef.current on useEffect deps it doesn't work. Another "workaround", it would be put the active state (that toggle the component) on deps. Trouble with this "workaround", the old inputRef isn't removed from the form like implemented over unform todays, because again, unregisterFied isn't called.
So for solutions could be done:
diego3g commentedon Jan 21, 2021
@kkirby Thanks for the contribution here, all that you said make a lot of sense to me, i'll take a deeper look into it and possibly make a PR.
chore: Access field ref instead of current value
chore: Access field ref instead of current value
chore: Access field ref instead of current value
chore: Access field ref instead of current value
vjee commentedon Mar 8, 2021
Any progress on this? It looks like the PR is ready but not yet merged.
jpedroschmitz commentedon Mar 18, 2021
Hey @vjee, this will probably lead to breaking changes, so we are waiting to release this new version.
Probably going to release an alpha 3.0 version soon.