way to avoid re-renders for an atom with a nested object?

[heecheon92]

Say we have an atoms like this.

import {produce} from "immer"

type Profile = {
  name: { firstName: string; lastName: string };
  age: { legalAge: number; displayAge: number };
}

export const deepObjectAtom = atom<Profile>({
  name: { firstName: 'John', lastName: 'Doe' },
  age: { legalAge: 21, displayAge: 22 },
});


const firstNameAtom = atom(
  (get) => get(deepObjectAtom).name.firstName,
  (_get, set, arg: string) => {
    set(deepObjectAtom, (prev) => ({
      ...prev,
      name: { ...prev.name, firstName: arg },
    }));
  }
);


const legalAgeAtom = atom(
  (get) => get(deepObjectAtom).age.legalAge,
  (get, set, arg: number) => {
    set(
      deepObjectAtom,
      produce(get(deepObjectAtom), (draft) => {
        draft.age.legalAge = arg;
      })
    );
  }
);

I have a two separate components; let's say CompA and CompB.

CompA only uses "firstNameAtom" and CompB only uses "legalAgeAtom".

When, CompB sets a new legal age, CompA re-renders even though CompA is not directly referencing the upstream root object (deepObjectAtom).

Is this an expected behavior?

Fortunately, React Compiler automagically fixes this issue but I am wondering if there is a way to prevent re-renders when value of the downstream object remains the same regardless of change in the upstream object without ReactCompiler auto-memo feature.

[heecheon92]

Ah... never mind. CompA and CompB were re-rendering because CompC (a parent component of A and B) were re-rendering.