Is it possible to make objects returned by selector tracked?

[RIP21]

Currently, if your selector returns an object, you get re-renders on any change to this object, even if you use only a subset of fields from it.

To get a tracked version of them, you need to use react-tracked directly.

Also, having selectors available via getters like store.mySelector would be a killer, but I doubt that's possible :)

But at least useTracked(store, 'mySelector') would be nice. Maybe it works already, but types are wrong returning a union type of all the possible value types of TState[Key]

Currently, I have to work around it this way, which is pretty ugly (I'm unsure if it even works; I haven't launched the app yet :D)

export const useTrackedThreadEntryWebResults = createContainer(
  () => [useStoreValue(useThreadEntryStore(), 'webResults'), noop] as const,
).useTrackedState;

[RIP21]

Ok, I worked around it like that.

Still need to test it, but, yeah :) At least TS is happy :)

import { useMemo } from "react";
import { createTrackedSelector } from "react-tracked";

export function useTrackedStoreValue<
  StateType extends TState,
  Mutators extends [StoreMutatorIdentifier, unknown][],
  TActions extends Record<string, AnyFunction> = {},
  TSelectors extends Record<string, AnyFunction> = {},
  K extends keyof StateType = keyof StateType
>(
  store: TStateApi<StateType, Mutators, TActions, TSelectors>,
  key: K
): StateType[K];
export function useTrackedStoreValue<
  StateType extends TState,
  Mutators extends [StoreMutatorIdentifier, unknown][],
  TActions extends Record<string, AnyFunction> = {},
  TSelectors extends Record<string, AnyFunction> = {},
  K extends keyof TSelectors = keyof TSelectors
>(
  store: TStateApi<StateType, Mutators, TActions, TSelectors>,
  key: K,
  ...args: Parameters<TSelectors[K]>
): ReturnType<TSelectors[K]>;
export function useTrackedStoreValue<
  StateType extends TState,
  Mutators extends [StoreMutatorIdentifier, unknown][],
  TActions extends Record<string, AnyFunction> = {},
  TSelectors extends Record<string, AnyFunction> = {}
>(
  store: TStateApi<StateType, Mutators, TActions, TSelectors>,
  key: "state"
): StateType;
export function useTrackedStoreValue<
  StateType extends TState,
  Mutators extends [StoreMutatorIdentifier, unknown][],
  TActions extends Record<string, AnyFunction> = {},
  TSelectors extends Record<string, AnyFunction> = {},
  K extends keyof StateType = keyof StateType
>(
  store: TStateApi<StateType, Mutators, TActions, TSelectors>,
  key: K,
  equalityFn?: TEqualityChecker<StateType[K]>
): StateType[K];
export function useTrackedStoreValue<
  StateType extends TState,
  Mutators extends [StoreMutatorIdentifier, unknown][],
  TActions extends Record<string, AnyFunction> = {},
  TSelectors extends Record<string, AnyFunction> = {},
  K extends keyof TSelectors = keyof TSelectors
>(
  store: TStateApi<StateType, Mutators, TActions, TSelectors>,
  key: K,
  ...args: [
    ...Parameters<TSelectors[K]>,
    TEqualityChecker<ReturnType<TSelectors[K]>>?
  ]
): ReturnType<TSelectors[K]>;
export function useTrackedStoreValue<
  StateType extends TState,
  Mutators extends [StoreMutatorIdentifier, unknown][],
  TActions extends Record<string, AnyFunction> = {},
  TSelectors extends Record<string, AnyFunction> = {},
  K extends keyof StateType | keyof TSelectors =
    | keyof StateType
    | keyof TSelectors
>(
  store: TStateApi<StateType, Mutators, TActions, TSelectors>,
  key: K,
  ...args: unknown[]
) {
  const useTrackedState = useMemo(() => {
    console.log("new tracked");
    return createTrackedSelector(() =>
      store.useValue(key as any, ...(args as any))
    );
  }, [store, key]);
  return useTrackedState();
}

export const useTrackedThreadEntryWebResults = () => useTrackedStoreValue(useThreadEntryStore(), 'webResults');

[RIP21]

Sadly, the above is not working as expected. It gets rendered etc. But optimizations are not working.

What's worse is that useValue doesn't seem to work as expected with selectors either. It gets component rerender on any change to the state, even if related fields to the selector haven't changed. It works fine with the root state, but for selectors, it seems like it gets them triggered no matter what. While it should only be triggered when a dependency has changed.

[RIP21]

Alright, I figured there is no magic, so all selectors get triggered no matter what, recalculating even if their inputs didn't change. So if they return nonprimitive value, they're screwed and considered new hence re-render happens. Kinda obvious :) But thought maybe there is some cool hackery that tracks get's, and they're not getting retriggered if their dependencies did not change.

[RIP21]

https://codesandbox.io/p/sandbox/react-typescript-forked-n8n6xz

My experiments are done here.
So yeah, it's not possible to get tracked values from selectors. Probably just using react-tracked plus zustand directly might be a better idea.