fix(react): correctly stabilize transformItems function

[marialungu]

Correctly stabilize transformItems function from the hooks, as reported in this issue

[francoischalifour]

Can you add some tests by updating the transformItems prop? You'll realize this doesn't work.

You need to reassign transformItemsRef.current to the transformItems prop in an effect, and then use transformItemsRef.current in the existing effect.

[francoischalifour]

This tests that the weird array behavior is gone, but it doesn't test that the feature actually works.

Here, we want to rerender with another transformItems reference, and to make sure that the items have been transformed with this latest function reference.

[francoischalifour]

@Haroenv @sarahdayan @dhayab Are you happy with this function stability solution?

It automatically "caches" the transformItems function in a ref so that users can pass unstable function references.

However, when the transformItems function reference changes, it doesn't re-trigger a render. It's only on the next non-function prop change that the effect re-executes.

[Haroenv]

If you're purposely changing the transformItems function you would expect it to immediately be evaluated, however if you simply pass an unstable function you wouldn't expect that to have a side effect. As those behaviours are incompatible, the most correct is indeed probably what you're suggesting here; i.e. stabilising the function, but not causing any side effects through any changes that would happen