Selector Re-renders my component everytime even when no subscribed state is changed.

[MuhammadAli13562]

I am trying to have a component avoid subscribing to ctx_win.chatMessages and thus returning only the meta info about ctx_win in the returned object. But either way whenver chatMessages change the selector not only recomputes which it has to , but it also re-renders the component subscribing only to this meta info on the ctx_win.

export const SelectContextWindowMetaById = createSelector(
  [SelectAllContextWindows, (_, Id: string) => Id],
  (contextWindows, Id) => {
    const ctx_win = contextWindows.find((ctx) => ctx.fileKey === Id);

    if (ctx_win)
      return {
        Id: ctx_win.Id,
        createdAt: ctx_win.createdAt,
        updatedAt: ctx_win.updatedAt,
        fileName: ctx_win.fileName,
        fileURL: ctx_win.fileURL,
        fileKey: ctx_win.fileKey,
      };
  }
);

Am i doing something wrong with returning an object because as far as i have read in docs object is deeply compared rather than just its reference.

[EskiMojo14]

objects aren't compared deeply, they're compared by reference - if anything changes inside any of the inputs returned, the output selector will be called again, returning a new value and causing a rerender.

[MuhammadAli13562]

Thank you for reply , can you tell me what would be the appropriate way of doing this then ?

[EskiMojo14]

you would need an input selector per field you want to track:

const selectMetaInfoFromCtx = createStructuredSelector({
  id: ctx => ctx.id,
  createdAt: ctx => ctx.createdAt,
  updatedAt: ctx => ctx.updatedAt
})

const selectMetaInfoById = createSelector(
  [selectAllContextWindows, (_: unknown, id: string) => id],
  (ctxWindows, id) => {
    const ctx = ctxWindows[id]
    return ctx && selectMetaInfoFromCtx(ctx)
  }
)

[m-ali-taxgpt]

Great. Thanks a lot.