CPLAT-16997 Fix selector hooks redrawing when values haven't changed

[greglittlefield-wf]

Motivation

The useSelector hook and hooks created by createSelectorHook allow consumers to subscribe to store updates and rerender the component only when a value returned from the selector function changes.

However, the Dart versions of these APIs were always rerendering, even when the selected value didn't change.

This was caused by two issues:

1. We were always wrapping the selected value in a new ReactInteropValue object, which meant that when you didn't provide a custom equality function, the default behavior on the JS side of comparing the value using === would always think the value changed
2. We were always passing null into the hook as an equality function as opposed to conditionally calling it, which was causing null errors in React Redux JS that were getting ignored

Changes

• Instead of always wrapping in an interop value, conditionally wrap only when necessary (Dart functions), just like we do in react-dart's JsBackedMap
• Conditionally pass the equality function instead of always passing in null
• Add regression tests to ensure renders only occur when we expect them to, for both hooks and connect
• Add test coverage for values of different types, which also tests conditional wrapping of values
• Add useSelector example

Release Notes

Review

See CONTRIBUTING.md for more details on review types (+1 / QA +1 / +10) and code review process.

Please review:

QA Checklist

• Tests were updated and provide good coverage of the changeset and other affected code
• Manual testing was performed if needed
  • Steps from PR author:
    • Serve the examples locally webdev serve
    • Go to http://localhost:8080/over_react_redux/examples/simple/
    • Start a React Dev Tools profile, click one of the BigCounter buttons, and stop the profile
    • Verify that only the "BigCounter" components rerender, and not the "Counter" or "HookCounter" components
  • Anything falling under manual testing criteria outlined in CONTRIBUTING.md

Merge Checklist

While we perform many automated checks before auto-merging, some manual checks are needed:

• A Client Platform member has reviewed these changes
• There are no unaddressed comments - this check can be automated if reviewers use the "Request Changes" feature
• For release PRs - Version metadata in Rosie comment is correct

[aviary-wf]

Security Insights

No security relevant content was detected by automated scans.

Action Items

• Review PR for security impact; comment "security review required" if needed or unsure
• Verify aviary.yaml coverage of security relevant code

---

Questions or Comments? Reach out on Slack: #support-infosec.

[greglittlefield-wf]

I changed this to work around dependency_validator flagging imports in comments

[greglittlefield-wf]

Since we pass through the value directly (and memoize it in the cases we wrap it in DartValueWrapper.wrapIfNeeded), this is no longer necessary

[greglittlefield-wf]

These tests have moved to store_bindings_tests.dart. I started by refactoring them to use custom components so they could be run with multiple types of selected values, and they eventually morphed into tests that could also be shared with connect, thus the new file name.

[greglittlefield-wf]

I'm open to better name suggestions for this file

[aaronlademann-wf]

QA +1

[joebingham-wk]

+1, looks great! Those are some dope tests 🎉

[joebingham-wk]

Oohh this is clever. TIL

[KealJones]

+1

[greglittlefield-wf]

@Workiva/release-management-p

[rmconsole-wf]

+1 from RM