[Question] Getting several context values at once?

[soykje]

Hi 👋

First things first, thx a lot for this great work! 👏 I'm still discovering it, and maybe I'm going to ask a silly question but... is there any reason why useContextSelector examples were always using the same "one call, one value" pattern:

const v1 = useContextSelector((ctx) => ctx.v1)
const v2 = useContextSelector((ctx) => ctx.v2)
const v3 = useContextSelector((ctx) => ctx.v3)
...

...which seems quite verbose to me. Couldn't we simply use a single call such as:

const { v1, v2, v3 } = useContextSelector(({ v1, v2, v3 }) => ({ v1, v2, v3 }))

Thx a lot for your answer! 🙏

[dai-shi]

You can do that if you memoize the selector function. For example proxy-memoize does it for you.

import memoize from 'proxy-memoize';

const selector = memoize(({ v1, v2, v3 }) => ({ v1, v2, v3 }));

const Component = () => {
  const { v1, v2, v3 } = useContextSelector(Ctx, selector);
  // ...
};

[soykje]

Thx for this quick answer! I must be missing something but, why should I use memoization? Aren't both patterns eqs?

[dai-shi]

Because

const { v1, v2, v3 } = useContextSelector(({ v1, v2, v3 }) => ({ v1, v2, v3 }))

will trigger re-renders for any changes (like v4).

So, "one call, one value" pattern is the rule we follow. You might be interested in reading #19 discussion.

[soykje]

Hmmm... I'm not sure to perfectly understand why, but I'll be looking for some infos within the linked discussion 👍 Thx a lot @dai-shi !

[dai-shi]

Assuming you are not talking about custom equality function, const { v1, v2, v3 } = useContextSelector(({ v1, v2, v3 }) => ({ v1, v2, v3 })) is not technically easy.
It's not impossible though, and that's what react-tracked does.

const { v1, v2, v3 } = useTrackedState()

react-tracked uses use-context-selector under the hood. So, they do different jobs.

[soykje]

Ok thx a lot for all these informations, let's read (and learn) then 🙂

[dai-shi]

Closing as answered.