(refactor/react): Memoize ComponentScope unique value with useState to ensure referential stability.

[Iwo Plaza (iwoplaza)]

Description of the change

According to React Docs, useMemo's result can be forgotten under special circumstances. To avoid this potential behavior, we could use useState to create a stable reference to both the tuple and the generated value at the same time. What do you think?

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation or Development tools (readme, specs, tests, code formatting)

[Logan Volkers (loganvolkers)]

Thank you for the PR

[Wendy Fouchter (Wendystraite)]

Do you think this is possible to have a failing test without this fix ?

As I can see from the doc (https://react.dev/reference/react/useMemo) :

React will not throw away the cached value unless there is a specific reason to do that. For example, in development, React throws away the cache when you edit the file of your component. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache—for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should be fine if you rely on useMemo solely as a performance optimization. Otherwise, a state variable or a ref may be more appropriate.

[Wendy Fouchter (Wendystraite)]

Well I didn't succeed in doing a test case but you are right : useState is semantically more appropriate since it guarantees both componentScopeTuple and generatedValue to remain stable where now only componentScopeTuple is stable (with useRef).