useShallow just as a trigger

[elinake]

I have a massive data object that is subscribed to in many places, the original hook was like this:

  const { activeView} = useViewStore(
    useShallow((state) => ({
      activeView: state.activeView,
    })),
  );

But it was too heavy and rerendered too many items. At this point what actually tells that the view has changed, is viewType and viewId, so Copilot suggested this:

useViewStore(
  useShallow((state) => [state.activeView?.viewType, state.activeView?.id] as const),
);

  const activeView = useViewStore.getState().activeView;

So it only triggers the activeView logic when relevant, but it needs the full activeView for the logic and reads it after being triggered from type and id. This avoids unnecessary renders and it seems to work well in every regard, but Copilot is unable to give me any source about this pattern being legitimate, and I can't find anything googling either.

[dai-shi]

It works, and as long as you know what you're doing, meaning this can cause less rendering and inconsistencies, it should be fine.

I don't prefer the use of useViewStore hook and useShallow as semantics. I'd prefer something like this:

const [activeView, setActiveView] = useState(useViewStore.getState().activeView);
const { viewType, id } = activeView || {};
useEffect(() => useViewStore.subscribe(() => {
  const curr = useViewStore.getState().activeView
  if (curr?.viewType !== viewType || curr?.id !== id) {
    setActiveView(curr);
  }
}), [viewType, id]);