[Feature]: Allow partial selectors for react-context-selector

[seanpmaxwell]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

Coming from a redux environment, I was used to doing a lot of this:

  const {
    session,
    signupMethodStr,
  } = useAppCtx(ctx => ({
    session: ctx.session,
    signupMethodStr: ctx.session.signupMethodStr,
  }));

Which is a lot nicer/cleaner that having to call the useAppCtx() hook multiple times. This causes a too many re-renders error in ReactJS? error though. I believe it's because new object gets created every time the selector is run. In order to fix this I had to do something hacky with the selector function:

export const useAppCtx = <T extends {}>(selector: TSlctr<T>): T => {
  const ctx = useContextSelector(AppCxt, ctx => ctx);
  return selector(ctx);
};

Instead of how the docs show:

export const useAppCtx = <T extends {}>(selector: TSlctr<T>): T => {
  return useContextSelector(AppCxt, selector);
};

Is there any chance we get could this to work by default? Thanks.

Have you discussed this feature with our team

No

Additional context

No response

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

None

[layershifter]

@seanpmaxwell it's something that have been implemented in Fluent UI v0 (see https://github.com/microsoft/fluentui/blob/ceacd96379e6d7268d1807a318a9b6f7c48f519b/packages/fluentui/react-bindings/src/context-selector/useContextSelectors.ts), but we found out that the pattern is fragile and is hard to use properly.

• Hard to distinguish the use of useContextSelecor() vs useContextSelectors() i.e. what to use and when?
• Need for a complex shallow compare and potential need for the custom compare function:
  

  fluentui/packages/fluentui/react-bindings/src/context-selector/useContextSelectors.ts

  Lines 90 to 93 in ceacd96

  	// schedule re-render when selected context is updated
  	const hasSelectedValuesUpdates = Object.keys(selectors).find(
  	(key: Properties) => !Object.is(state[1] /* previous { [key]: selector(value) } */[key], selected[key]),
  	);

• Lack of such pattern in React RFC (RFC: Context selectors reactjs/rfcs#119, RFC: Speculative Mode reactjs/rfcs#150)
• Not supported in React itself: see useSyncExternalStore & I’m getting an error: “The result of getSnapshot should be cached”)

I hope that it clarifies why we are not going to implement it 🐱

---

FYI:

  const {
    session,
    signupMethodStr,
  } = useAppCtx(ctx => ({
    session: ctx.session,
    signupMethodStr: ctx.session.signupMethodStr,
  }));

Which is a lot nicer/cleaner that having to call the useAppCtx() hook multiple times. This causes a too many re-renders error in ReactJS? error though.

This is broken and will cause a component to render on an every re-render as a result of a selector function is never referentially equal.